Bootstrap 4 Navbar with multiple dropdowns

Last update: Aug 22, 2022

Overview

Bootstrap Navbar Dropdowns

Support for bootstrap 3, 4 and 5

Installation

Node

npm install boostrap-navbar-dropdowns

yarn add boostrap-navbar-dropdowns

Using CDN

<link href="https://cdn.jsdelivr.net/gh/fontenele/[email protected]/dist/css/bootstrap-navbar-dropdowns.min.css"rel="stylesheet">

<script src="https://cdn.jsdelivr.net/gh/fontenele/[email protected]/dist/js/bootstrap-navbar-dropdowns.min.js"></script>

Usage

$('.navbar').navbarDropdown({
  theme: 'bs5',
  trigger: 'mouseover'
});

Options

Name	Type	Description
`theme`	string	Bootstrap theme. Valid values are bs3, bs4 or bs5
`trigger`	string	Event for show dropdown content. Valid values are all DOM Events.

Examples

Bootstrap 3
- Example
- CodePen
Bootstrap 4
- Example
- CodePen
Bootstrap 5
- Example
- CodePen

Creators

Guilherme Fontenele

https://github.com/fontenele

Bootstrap resoures

Copyright and license

Licensed under the MIT License.

Comments

2nd and 3rd level links don't open target pages in FF & Chrome for Mac

This Bootstrap v4 multi-level navbar is exactly what I've been looking for, and although the example.html demo works as described, when converting the demo into a real-world navbar (ie moving the 'href=' attributes out of the 'li' list item tags into the 'a' anchor tags where they need to be, and changing the default '#' values to valid URL values), none of the 2nd and 3rd level sub-menu links actually work. Clicking on them simply closes the menu, instead of loading the target pages.

See my 'exampleLinks.html' file, attached.

Thanks, Muiz.

exampleLinks.html.zip
bug

opened by muizonline 4

Fix to close previously opened when open/click another

$( document ).ready( function()
{
    $( '.navbar a.dropdown-toggle' ).on( 'click', function(e)
    {
        var elmnt = $( this ).parent().parent();
        if ( !elmnt.hasClass( 'nav' ) )
        {
            var li          = $( this ).parent();
            var widthParent = parseInt( elmnt.css( 'width' ).replace( 'px', '' ) ) - 5;

            if( !li.hasClass( 'open' ) )
            {
/* LOOK HERE , start */
                $(this).parent().parent().find( '.dropdown.open' ).not( $( this ) ).removeClass( 'open' );
/* LOOK HERE , end */
                li.addClass( 'open' )
            }
            else
            {
                li.removeClass( 'open' );
            }

            $( this ).next().css({
                'top': 0,
                'left': widthParent + 'px'
            });

            return false;
        }
    });
});

opened by h-zone 3

Bootstrap 5 version?

Will there be a Bootstrap 5 version? And if so when?

I know Bootstrap 5 is still in alpha yet, but it would be great if it was supported. Maybe keep 2 versions, one for Bootstrap 4 and a new one for Bootstrap 5.

Thanks!

opened by mother10 2
fix and improve javascript / css

Hi,

I think that people that clone or download your repository must have an working exemple.html file, that's why I add entries for jquery and bootstrap CDN.

For the javascript part, I used more precise selectors that looks only for css class names instead of traversing child by child, IMO, it'll be more robust.

In the css, no need to create a custom class caret-right, it is easy to know if a caret is in the first ul in the navbar or if it is a child. then apply only a rotate transformation to the carets

I fixed an issue that allows to open too many unrelatives dropdown.

opened by optyler 2
In Mobile device it's not working!!!!!

Hi, In desktop everything is fine but you give hover event in desktop which is nice for desktop. In mobile there is no hover event that is why it's not working. The last level dropdown which is on hover display in desktop not working in mobile. Can you fix this. Thanks

opened by prashen 2
Change to narrow mode

The dropdowns of BT5 function (example and codepen) but if i shift the browser into narrow mode, the menu is open at first level (firefox and edge) and the Hamburger is dead.... a 'solution' would be a mobile sidebar...but.. (the bt4 - version functions)

opened by gtbu 1
Can't open 3rd level using a mobile phone..

Hi I like your script and was going to use but faced troubles with opening the 3rd level using in mobile mode and had to seek a new solution...

Any ideas how to fix?

opened by Denis-Evseev 1
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes

Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1

Switch to GitHub workflows 76abc93

Fix issue where decode throws - fixes #6 746ca5d

Update license (#1) 486d7e2

Tidelift tasks a650457

Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

Commits

a0eea46 0.2.2

980e0bf Prevent overwriting previously decoded tokens

3c8a373 0.2.1

76abc93 Switch to GitHub workflows

746ca5d Fix issue where decode throws - fixes #6

486d7e2 Update license (#1)

a650457 Tidelift tasks

66e1c28 Meta tweaks

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump minimatch from 3.0.4 to 3.1.2
Bumps minimatch from 3.0.4 to 3.1.2.

Commits

699c459 3.1.2

2f2b5ff fix: trim pattern

25d7c0d 3.1.1

55dda29 fix: treat nocase:true as always having magic

5e1fb8d 3.1.0

f8145c5 Add 'allowWindowsEscape' option

570e8b1 add publishConfig for v3 publishes

5b7cd33 3.0.6

20b4b56 [fix] revert all breaking syntax changes

2ff0388 document, expose, and test 'partial:true' option

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump terser from 4.4.2 to 4.8.1
Bumps terser from 4.4.2 to 4.8.1.

Changelog

Sourced from terser's changelog.

v4.8.1 (backport)

Security fix for RegExps that should not be evaluated (regexp DDOS)

v4.8.0

Support for numeric separators (million = 1_000_000) was added.

Assigning properties to a class is now assumed to be pure.

Fixed bug where yield wasn't considered a valid property key in generators.

v4.7.0

A bug was fixed where an arrow function would have the wrong size

arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.

Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

v4.6.13

Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.

Fixed parsing of BigInt with lowercase e in them.

v4.6.12

Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]

Printing of unicode identifiers has been improved

v4.6.11

Read unused classes' properties and method keys, to figure out if they use other variables.

Prevent inlining into block scopes when there are name collisions

Functions are no longer inlined into parameter defaults, because they live in their own special scope.

When inlining identity functions, take into account the fact they may be used to drop this in function calls.

Nullish coalescing operator (x ?? y), plus basic optimization for it.

Template literals in binary expressions such as + have been further optimized

v4.6.10

Do not use reduce_vars when classes are present

v4.6.9

Check if block scopes actually exist in blocks

v4.6.8

Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

v4.6.7

Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

... (truncated)

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6

ef88b93 security notice for additional prototype pollution issue

c2b9819 isConstructorOrProto adapted from PR

bc8ecee test from prototype pollution PR

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Flyouts not working

I wonder if someone can help me identify what's gone wrong.

I have integrated the bootstrap-navbar-dropdowns into my CMS, and I have it mostly working except the flyouts aren't working, and the glyph for each of them is pointing down.

This is for the bootstrap 4.x version. I think I have all the js loaded correctly, and I have adapted the html structure as closely as I can to my data.

You can look at my site using this link: https://botany.org/BSAResponsive (it will use this design only at this URL. If you start navigating around the site it will use the default design which is not responsive)

My goal with this design is simply to use it to proof our content pages and prep for migration to a completely new Bootstrap based theme. So yes I know it's old and ugly and the menu system is too complicated; this is just an interim step.

opened by robbrandt 0
Bump path-parse from 1.0.6 to 1.0.7
Bumps path-parse from 1.0.6 to 1.0.7.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0

Releases(5.0.2)

5.0.2(Oct 19, 2020)
cdn added

Source code(tar.gz)
Source code(zip)
5.0.0(Oct 19, 2020)
transformed into plugin

added themes (bs3, bs4 and bs5)

Source code(tar.gz)
Source code(zip)
v4.0.3(Mar 28, 2020)

Source code(tar.gz)
Source code(zip)
v4.0.2(Mar 28, 2020)

Source code(tar.gz)
Source code(zip)
2.1.0(Jan 1, 2019)

Source code(tar.gz)
Source code(zip)
2.0.0(Aug 1, 2018)

Source code(tar.gz)
Source code(zip)
v1.0.0(Nov 15, 2016)

Fix positions, selectors and some features.
Source code(tar.gz)
Source code(zip)

Owner

Guilherme Fontenele

https://guilherme.fontenele.net

GitHub http://fontenele.github.io/bootstrap-navbar-dropdowns/

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

14 Feb 10, 2022

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

138 Jan 2, 2023

Superlight vanilla javascript plugin, for modern web dropdowns. Supporting multi-options, search and images. Designed to be seamlessly themed

Superlight vanilla javascript dropdowns by LCweb Need to jump off of jQuery (or any other) dependency? Other packages are too heavy to just tweak sele

10 Dec 26, 2022

jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

jQuery jSide Menu jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. Browse: Live Demo & Using Guide Main Features F

24 Feb 14, 2022

True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

TRUE P2P CONCEPT - Lets redecentralize the web This repo is just conceptual. Active development of the endproduct (TRUE P2P) happens here https://gith

6 Mar 29, 2022

⚡🚀 Call multiple view functions, from multiple Smart Contracts, in a single RPC query!

ethers-multicall ⚡ ?? Call multiple view functions, from multiple Smart Contracts, in a single RPC query! Querying an RPC endpoint can be very costly

20 Dec 30, 2022

An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.

bootstrap-fileinput An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with file preview for various files, offers multiple selection, resu

5.2k Jan 3, 2023

Multiple level dropdown works with Bootstrap 5, just like native support.

Bootstrap 5 Multiple Level Dropdown. For Bootstrap 4, please visit Bootstrap 4 Multiple Level Dropdown Using official HTML without adding extra CSS st

17 Dec 13, 2022

Multiple Selection Combo Box using Bootstrap 3

MagicSuggest v2.1.6 Bug Fix (fix) Disabled arbitrary HTML and SCRIPT execution on input. MagicSuggest v2.1.5 (fix) prepend close button instead of app

1.3k Dec 22, 2022

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

1.4k Dec 22, 2022

BestBuy Bot is an Add to cart and Auto Checkout Bot. This auto buying bot can search the item repeatedly on the ITEM page using one keyword. Once the desired item is available it can add to cart and checkout very fast. This auto purchasing BestBuy Bot can work on Firefox Browser so it can run in all Operating Systems. It can run for multiple items simultaneously.

BestBuy Bot — Open Source GPU/PS5/Xbox Bot I took bits from best open and closed sourced bots and made this simple bot. Please star my repo if this co

585 Dec 31, 2022

⚡Chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of scope" from #HackerOne #Bugcrowd #Intigriti ...

FastDork v0.1 This chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of sc

74 Dec 31, 2022

Multiple hacks that breaks the game

blooket-hack All of the cheats are based on a game mode. So if you chose a gold quest game mode then you go to the gold folder and then use one of the

493 Mar 5, 2022

A short project to automatically upload multiple pictures to pinata.cloud

Papel Mache Papel Mache is an app that uploads pictures to IPFS through pinata.cloud Requirements pinata/sdk: 1.1.14 node: 14.17.6 Node Node installat

7 Aug 18, 2022

A very simple tool that generates multiple spellings of a phone number (to effectively search for it using the OR operator and quotes)

phonenumberqueryconstructor A very simple tool that generates multiple writings of a phone number (to effectively search for it using the OR operator

10 Dec 7, 2022

Here I will add daily one problem with solution basic to advance level and try to add multiple solutions of a single problem.

#100-code-days ?? I am adding daily 1 JavaScript solution here ?? and you can fork the repo for add your solution for any specific probelm ⌛️ Day 01:

4 Jan 22, 2022

Bootstrap 4 Navbar with multiple dropdowns

Related tags

Overview

Support for bootstrap 3, 4 and 5

Installation

Node

Using CDN

Usage

Options

Examples

Bootstrap 3

Bootstrap 4

Bootstrap 5

Creators

Copyright and license

Comments

v0.2.2

v0.2.1

v4.8.1 (backport)

v4.8.0

v4.7.0

v4.6.13

v4.6.12

v4.6.11

v4.6.10

v4.6.9

v4.6.8

v4.6.7

Releases(5.0.2)

5.0.2(Oct 19, 2020)

5.0.0(Oct 19, 2020)

v4.0.3(Mar 28, 2020)

v4.0.2(Mar 28, 2020)

2.1.0(Jan 1, 2019)

2.0.0(Aug 1, 2018)

v1.0.0(Nov 15, 2016)