Tabbed nav
Sometimes the layout can be quite complex and part of your content can be hidden by default, but still be present on the same page. In such cases you can convert static navigation links to tabbed navigation that basically switches between containers without page reloading. Just add .navclass to .navbar-navcontainer and add data-toggle="tab"to your <a>elements. You can also add tabbed links to your dropdown items. Since it's default Tabs component, tabbed navbar links support all styling and config options of the component.
Light navbar tabs:
Dark navbar tabs:
Navigation classes
.navoptions with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-itemand .nav-link.
| Class | Description | |
|---|---|---|
| Navigation elements | ||
.nav
|
Global wrapper for navigation list. It uses default Bootstrap's styles of .navcomponent and similar markup options.
|
|
.navbar-nav
|
for a full-height and lightweight navigation (including support for dropdowns). | |
.nav-item
|
This class is required in an immediate nav link parent element in any .navcontainer: sidebar, navbar, nav groups, tabs, pills etc.
|
|
.nav-item.dropdown
|
Combination of these classes is required for items with dropdown menu - nav item with .dropdownclass is a dropdown toggle and menu wrapper that declares position: relative;.
|
|
.nav-item.dropup
|
Same as .dropdown, but this class is required in bottom navbars, because it triggers dropdown menus above elements in navbar. Dropdown caret direction in bottom navbar also depends on this class.
|
|
.navbar-nav-link
|
A custom class, unlike Bootstrap's default .nav-linkclass it doesn't affect navs in dropdowns. This class is responsible for navigation link styling and is also required as a part of nav list element structure. It's also a target for .activeand .disabledclasses.
|
|
| Dropdowns | ||
.dropdown-user
|
This class is used in menu with user pic - image size is calculated dynamically in SASS and .dropdown-useris needed to target the container where these calculations need to run.
|
|
.dropdown-content
|
If you need to prevent dropdown from closing when you interact with it, add .dropdown-contentto default .dropdown-menucontainer. This doesn't disable click event outside the dropdown though.
|
|
.dropdown-content-header
|
Class for the headerwithin .dropdown-content- custom element with padding that mathches custom dropdown body and footer padding. Can contain multiple components on both sides.
|
|
.dropdown-content-body
|
Class for the bodywithin .dropdown-content- element with custom padding, by default is similar to .card-body, but can be changed in SASS variables if you want to increase or decrease custom dropdown spacing.
|
|
.dropdown-content-footer
|
Class for the footerwithin .dropdown-content- custom element with padding that mathches custom dropdown body and header padding. Can contain multiple components on both sides.
|
|
.dropdown-scrollable
|
This class sets max-heightto the dropdown body and adds vertical scrollbar. Can be added to .dropdown-content-bodycontainer to make only body scrollable or to the entire .dropdown-menu. Default max-height value is 340px.
|
|
.mega-menu-[alignment]
|
These classes control the percent-based width of the menu. Options for [alignment]: full- sets 100% width, left- aligns menu to the left, right- aligns menu to the right. Note - make sure you don't use .dropdownand .dropupclasses in .nav-itemcontainer.
|
|
.w-[breakpoint]-[value]
|
Set of responsive utility classes that set min-widthproperty to the .dropdown-menucontainer. Very useful in dropdowns with long content. Available options for [value](in pixels): 200, 250, 300, 350, 400, 450, 500, 550, 600.
|
|
| Misc | ||
.caret-0
|
Add this class to any .navbar-nav-link.dropdown-toggleif you want to hide caret (directional arrow). Useful in nav links with single icon, without text and badge.
|
|
[data-hover="dropdown"]
|
Data attribute that triggers dropdown toggling on hoverandclick. It also affects all submenus within this menu, so needs to be added to [data-toggle="dropdown"]only on top level.
|
|
Navigation markup
Navigation alignment
Navigation in the navbar can be aligned to the left, rightor center. By default it's aligned to the left (right in RTL direction). Since parent container is flexible, you need to use flex utility classesto change default alignment: add .justify-content-[breakpoint]-[property]to .navbar-collapsecontainer and/or responsive spacingutilities to push content to the right and horizontal spacing between navigation containers. On mobiles all navigation items are stackable by default. Make sure you use same breakpoint in all navbar elements. Examples below demonstrate left(default) and rightnav container alignments.
Left navigation alignment:
<!-- Navbar collapse container --><div class="collapse navbar-collapse" id="navbar-mobile"> <!-- Left aligned navigation --> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item dropdown"> <a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown"> Dropdown </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Action</a> <a href="#" class="dropdown-item">Another action</a> <a href="#" class="dropdown-item">One more action</a> </div> </li> </ul> <!-- /left aligned navigation --> [...]</div><!-- /navbar collapse container -->Right navigation alignment:
<!-- Navbar collapse container --><div class="collapse navbar-collapse" id="navbar-mobile"> [...] <!-- Right aligned navigation --> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item dropdown"> <a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown"> Dropdown </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Action</a> <a href="#" class="dropdown-item">Another action</a> <a href="#" class="dropdown-item">One more action</a> </div> </li> </ul> <!-- /right aligned navigation --></div><!-- /navbar collapse container -->Navigation dropdown trigger
By default, all dropdown menus are toggled by clicking, this is an intentional design decision. Another reason - browsers on mobile devices don't fully support hover/focus states, so if dropdown menu appearance is controlled by toggling display: none;on hover/focus, they won't be triggered on touch devices. However, there's a solution - toggle .showclass on hover AND click. Limitless includes custom dropdown_hover.jsextension that allows you to enable this behaviour on all dropdown levels and disable hover/focus triggering on mobiles. To use, just add data-hover="dropdown"to the dropdown link. Note - this enables hover trigger on alldropdown levels.
Trigger on click:
<!-- Trigger on click --><ul class="navbar-nav"> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item dropdown"> <a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown"> Dropdown </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Action</a> <a href="#" class="dropdown-item">Another action</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">One more action</a> </div> </li></ul><!-- /trigger on click -->Trigger on hover:
<!-- Trigger on hover --><ul class="navbar-nav"> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item dropdown"> <a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"> Dropdown </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Action</a> <a href="#" class="dropdown-item">Another action</a> <a href="#" class="dropdown-item">One more action</a> </div> </li></ul><!-- /trigger on hover -->Navigation item states
Navbar navigation items support 2 states: activeand disabled. In activestate nav links appear pressed, with a darker background and stronger text. Please note: .activeclass doesn't open dropdown menu, it just highlights links. If navigation link has class .disabled, JS blocks user interaction (basically disabled click event) and CSS mutes the link down. If this class is added to the .dropdown-togglenavigation element, dropdown menu won't be toggled. Examples below demonstrate active/disabled states markup.
Active item/dropdown state:
<!-- Active state --><ul class="navbar-nav"> <li><a href="#" class="navbar-nav-link active">Active link</a></li> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item dropdown"> <a href="#" class="navbar-nav-link dropdown-toggle active" data-toggle="dropdown"> Active dropdown </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item active">Active action</a> <a href="#" class="dropdown-item">Another action</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">One more action</a> </div> </li></ul><!-- /active state -->Disabled item/dropdown state:
<!-- Disabled state --><ul class="navbar-nav"> <li><a href="#" class="navbar-nav-link disabled">Disabled link</a></li> <li class="nav-item"><a href="#" class="navbar-nav-link">Link</a></li> <li class="nav-item dropdown"> <a href="#" class="navbar-nav-link dropdown-toggle disabled" data-toggle="dropdown"> Disabled dropdown </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item disabled">Disabled action</a> <a href="#" class="dropdown-item">Another action</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">One more action</a> </div> </li></ul><!-- /disabled state -->