Navigation overview
Horizontal navigation - type of navigation that is used in the top/bottom navbars and has horizontal direction: left to right or right to left in RTL version. By default horizontal navigation is a part of navbar component and can include a simple link, link with icon, multi level sliding lists and dropdown menu with single and multiple columns. Navigation can be placed in any navbar. Can be used in all layouts: with single and multiple sidebars, 3 columns, bottom navbar, fixed navbar etc. Default placement is main navbar. Horizontal navigation supports the following options:
| Option | Description |
|---|---|
| Navigation placement | Simple usage of horizontal navigation allows you to add simple navigation links to the main navbar: left or right position, excluding navbar brand area with logo. For more advanced usage, navigation can have multiple menu levels, tabbed navigation option, links with icons, inline and absolute positioned badges, badge marks etc. And can be placed in separate secondary navbar or in both navbars: top or bottom, fixed or static, full or fixed width. Everything depends on specific needs. Since horizontal navigation is a part of navbar component, is does support all available navbar options, components, sizes, colors etc. |
| Double side navigation | By default horizontal navigation supports 2 main positions: left and right. You need to use flexbox or auto margin utility classes to align them properly: .justify-content-[breakpoint]-between or .m-[breakpoint]-auto classes. For more advanced usage such as multi column mega menu, use grid or any other component inside navbar content, everything is supported. But please note: BS grid is mobile-first, if you need to use responsive columns, they wrap to a new line on certain screen size. To avoid this issue use .col-[count] classes. |
| Multiple level dropdowns | Horizontal navigation supports multiple menu levels in different directions. Navigation menu uses default markup for Bootstrap dropdown menus and opens children levels on click. Another option available - show submenu on hover using hover_dropdown.js extension. Navigation dropdowns support all available options for dropdown menus: border and background colors, icons, headers, dividers etc. For example - they can be white or match navbar background color by adding .bg-* and border-* classes to the dropdown container. Or can have cards, navigation and videos in a single menu. Everything is possible! |
| Additional styling | Depending on navbar background color, navigation menu automatically adjusts link colors for parent level. By default, all dropdowns have white background color, but this color can be changed by adding proper classes to the dropdown menu list. Available options are: border width and border color - .border-* class; background color - .bg-* class; additional element styling - badge and text colors, font weight etc. |
Navigation options
Open submenu on click
By default, all dropdown menus open on click. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item and the dropdown menu itself. Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. Horizontal navigation supports left and right menu alignment, full width mega menu and submenus with multiple nested levels.
Example markup:
<!-- 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 -->
Open submenu on hover
By default, all dropdown menus open on click. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item and the dropdown menu itself. Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. Horizontal navigation supports left and right menu alignment, full width mega menu and submenus with multiple nested levels.
Example markup:
<!-- 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 -->
Nav link elements
Horizontal navigation items support: text, icon, icon and text, images, SVG objects, inline and floating badges, badge marks, small charts etc. When using images and charts, make sure your element height does not exceed your base line height, otherwise navigation link with higher element will push other links down and increase navbar height. By default, Limitless uses 13px font size and 20px line height, so your elements must have 20px height. Also since default vertical alignment of images is middle, you need to include .align-top class as well. Sound a bit complex, but hey, this is a custom link element afterall so needs a few adjustments.
Example markup:
<!-- Collapsible navbar container -->
<div class="navbar-collapse collapse" id="navbar-demo">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link">
<i class="icon-cube3"></i>
<span class="d-xl-none ml-2">Icon only</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link">
<i class="icon-puzzle4 mr-2"></i>
Icon
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link">
<img src="../../../../global_assets/images/pie-chart.png" class="align-top mr-2 rounded-circle" width="20" height="20" alt="">
Image
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link">
<img src="../../../../global_assets/images/diagram.svg" class="align-top mr-2" width="20" height="20" alt="">
SVG image
</a>
</li>
</ul>
<ul class="navbar-nav ml-xl-auto">
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link">
<span class="d-xl-none">
<i class="icon-cube3 mr-2"></i>
Badge only
</span>
<span class="badge bg-danger-400 position-static ml-auto ml-xl-0">Bug</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link caret-0">
<i class="icon-pin-alt"></i>
<span class="d-xl-none ml-2">Floating badge</span>
<span class="badge badge-pill bg-blue ml-auto ml-xl-0">8</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link caret-0">
<i class="icon-bell2"></i>
<span class="d-xl-none ml-2">Badge mark</span>
<span class="badge badge-mark border-pink ml-auto ml-xl-0"></span>
</a>
</li>
<li class="nav-item dropdown dropdown-user">
<a href="#" class="navbar-nav-link">
<img src="../../../../global_assets/images/demo/users/face11.jpg" class="rounded-circle" alt="">
<span>User</span>
</a>
</li>
</ul>
</div>
<!-- /collapsible navbar container -->
Tabbed navigation
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 .nav class to .navbar-nav container 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.
Example markup with tabbed navigation:
<!-- Tabbed navigation -->
<div class="navbar navbar-expand-xl navbar-light navbar-component rounded-top mb-0">
<div class="navbar-brand">
<a href="index.html" class="d-inline-block">
<img src="../../../../global_assets/images/logo_dark.png" alt="">
</a>
</div>
<div class="d-xl-none">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-tabbed">
<i class="icon-menu"></i>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-tabbed">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a href="#tab-navbar-1" class="navbar-nav-link active" data-toggle="tab">
<i class="icon-cube3 mr-2"></i>
Active tab
</a>
</li>
<li class="nav-item dropdown">
<a href="#tab-navbar-2" class="navbar-nav-link" data-toggle="tab">
<i class="icon-puzzle4 mr-2"></i>
Inactive tab
</a>
</li>
</ul>
</div>
</div>
<div class="card card-body border-top-0 rounded-0 rounded-bottom tab-content">
<div class="tab-pane fade active show" id="tab-navbar-1">
Active tab
</div>
<div class="tab-pane fade" id="tab-navbar-2">
Inactive tab
</div>
</div>
<!-- /tabbed navigation content -->
Mega menu
Overview
Mega menu is a group of custom navbar components that uses slightly modified BS dropdown markup and native styling. Basically dropdown menu may contain any component - text blocks, lists, galleries, tabs, forms, tables, accordion, cards, buttons etc. However, since default dropdown menu closes itself on first click, some extra js code is needed to stop propagation. In this case dropdown toggle inside dropdown menu doesn't work by default and needs additional modifications. See the table with necessary classes and description below.
Example markup:
<!-- Navigation with mega menu -->
<ul class="nav navbar-nav">
<!-- Auto width -->
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Auto width</a>
<div class="dropdown-menu dropdown-content">
<div class="dropdown-content-body">...</div>
</div>
</li>
<!-- /auto width -->
<!-- Pixel width -->
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Pixel width</a>
<div class="dropdown-menu dropdown-content wmin-xl-500">
<div class="dropdown-content-body">...</div>
</div>
</li>
<!-- /pixel width -->
<!-- Percent width -->
<li class="nav-item mega-menu-left">
<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Percent width</a>
<div class="dropdown-menu dropdown-content w-xl-50">
<div class="dropdown-content-body">...</div>
</div>
</li>
<!-- /percent width -->
<!-- Full width -->
<li class="nav-item mega-menu-full">
<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Full width</a>
<div class="dropdown-menu dropdown-content">
<div class="dropdown-content-body">...</div>
</div>
</li>
<!-- /full width -->
</ul>
<!-- /navigation with mega menu -->
Menu and content options
All mega dropdowns support additional options for menu itself and content inside - menu header, menu footer, block titles, custom colors for menu's list background and menu borders, or its components. Different types of lists support all components and options available for basic dropdown menu component, such as badges, badge pills, switches, icons, headers etc. Custom background colors available only for simple dropdown menu.
Example header markup:
<!-- Dropdown menu with header -->
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Basic</a>
<div class="dropdown-menu dropdown-content wmin-xl-300">
<!-- Menu header -->
<div class="dropdown-content-header">
<span class="font-weight-semibold">Menu header</span>
</div>
<!-- /menu header -->
<!-- Menu body -->
<div class="dropdown-content-body">
...
</div>
<!-- /menu body -->
</div>
</li>
<!-- /dropdown menu with header -->
Example footer markup:
<!-- Dropdown menu with footer -->
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Basic</a>
<div class="dropdown-menu dropdown-content wmin-xl-300">
<!-- Menu body -->
<div class="dropdown-content-body">
...
</div>
<!-- /menu body -->
<!-- Menu footer -->
<div class="dropdown-content-footer bg-light">
<span>Left text</span>
<span class="ml-auto">Right text</span>
</div>
<!-- /menu footer -->
</div>
</li>
<!-- /dropdown menu with footer -->
Mega menu grid
Mega menu component supports a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row inside mega menu dropdown.
Example markup:
<!-- Dropdown menu grid -->
<li class="nav-item mega-menu-full">
<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Content grid</a>
<div class="dropdown-menu dropdown-content">
<div class="dropdown-content-body">
<div class="row">
<div class="col-md-3 col-sm-6">First column content</div>
<div class="col-md-3 col-sm-6">Second column content</div>
<div class="col-md-3 col-sm-6">Third column content</div>
<div class="col-md-3 col-sm-6">Fourth column content</div>
</div>
</div>
</div>
</li>
<!-- /dropdown menu grid -->
Navigation classes
.nav options 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-item and .nav-link.
| Class | Description | |
|---|---|---|
| Navigation elements | ||
.nav |
Global wrapper for navigation list. It uses default Bootstrap's styles of .nav component 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 .nav container: sidebar, navbar, nav groups, tabs, pills etc. |
|
.nav-item.dropdown |
Combination of these classes is required for items with dropdown menu - nav item with .dropdown class 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-link class 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 .active and .disabled classes. |
|
| Dropdowns | ||
.dropdown-user |
This class is used in menu with user pic - image size is calculated dynamically in SASS and .dropdown-user is 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-content to default .dropdown-menu container. This doesn't disable click event outside the dropdown though. |
|
.dropdown-content-header |
Class for the header within .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 body within .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 footer within .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-height to the dropdown body and adds vertical scrollbar. Can be added to .dropdown-content-body container 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 .dropdown and .dropup classes in .nav-item container. |
|
.w-[breakpoint]-[value] |
Set of responsive utility classes that set min-width property to the .dropdown-menu container. 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-toggle if 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 hover and click. It also affects all submenus within this menu, so needs to be added to [data-toggle="dropdown"] only on top level. |
|