Horizontal 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. 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. You can also control color mode with data-color-theme="[light | dark]". 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
Navigation dropdown
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 link item and the dropdown menu itself. Note: The data-bs-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-bs-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<button type="button" class="dropdown-item">Action</button>
<button type="button" class="dropdown-item">Another action</button>
<div class="dropdown-divider"></div>
<button type="button" class="dropdown-item">One more action</button>
</div>
</li>
</ul>
<!-- /trigger on click -->
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 14px font size and 22px line height, so your elements must have 22px height. You can use var(--body-line-height-computed) variable in your overrides for custom elements..
Example markup:
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="#" class="navbar-nav-link rounded">
Text
</a>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link rounded">
<i class="ph-cloud-arrow-down me-2"></i>
Icon
</a>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link rounded">
<img src="../../../assets/images/pie-chart.png" class="rounded-circle me-2" width="20" height="20" alt="">
Image
</a>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link rounded">
<img src="../../../assets/images/windows.svg" class="me-2" width="20" height="20" alt="">
SVG image
</a>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link navbar-nav-link-icon rounded">
<span class="d-inline-flex align-items-center d-xl-none">
<i class="ph-calendar me-2"></i>
Badge only
</span>
<span class="badge bg-danger ms-auto ms-xl-0">Bug</span>
</a>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link navbar-nav-link-icon rounded">
<i class="ph-circles-three"></i>
</a>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link navbar-nav-link-icon rounded">
<i class="ph-bell"></i>
<span class="badge bg-primary position-absolute top-0 end-0 translate-middle-top zindex-1 rounded-pill mt-1 me-1">8</span>
</a>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link navbar-nav-link-icon rounded">
<i class="ph-chats"></i>
<span class="bg-primary position-absolute top-0 end-0 translate-middle-top zindex-1 rounded-pill p-1 mt-1 me-1"></span>
</a>
</li>
</ul>
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-bs-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">
<div class="container-fluid">
<div class="navbar-brand">
<a href="index.html" class="d-inline-flex align-items-center">
<img src="../../../assets/images/logo_icon.svg" alt="">
<h4 class="text-body lh-1 mb-0 ms-3">Limitless</h4>
</a>
</div>
<div class="nav-tabs-responsive scrollbar-hidden shadow-none order-2 order-xl-1">
<ul class="nav nav-tabs border-0 mt-2 mt-xl-0">
<li class="nav-item dropdown">
<a href="#tab-navbar-1" class="navbar-nav-link rounded active" data-bs-toggle="tab">
<i class="ph-calendar me-2"></i>
Active
</a>
</li>
<li class="nav-item dropdown ms-1">
<a href="#tab-navbar-2" class="navbar-nav-link rounded" data-bs-toggle="tab">
<i class="ph-circles-four me-2"></i>
Inactive
</a>
</li>
<li class="nav-item dropdown ms-1">
<a href="#tab-navbar-3" class="navbar-nav-link rounded disabled" data-bs-toggle="tab">
<i class="ph-flower me-2"></i>
Disabled
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content border border-top-0 rounded-bottom p-3">
<div class="tab-pane fade active show" id="tab-navbar-1">
Active tab content
</div>
<div class="tab-pane fade" id="tab-navbar-2">
Inactive tab content
</div>
<div class="tab-pane fade" id="tab-navbar-3">
Disabled tab content
</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. Mega 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, data-bs-auto-close="outside" attribute is required to stop propagation and keep menu open. See the table with necessary classes and description below.
Example markup:
<!-- Mega menu sizing -->
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="navbar-nav-link dropdown-toggle rounded" data-bs-toggle="dropdown">Auto</a>
<div class="dropdown-menu p-0">
...
</div>
</li>
<li class="nav-item dropdown ms-xl-1">
<a href="#" class="navbar-nav-link dropdown-toggle rounded" data-bs-toggle="dropdown">Pixel width</a>
<div class="dropdown-menu wmin-xl-500 p-0">
...
</div>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link dropdown-toggle rounded" data-bs-toggle="dropdown">Percent width</a>
<div class="dropdown-menu start-auto w-xl-50 p-0">
...
</div>
</li>
<li class="nav-item ms-xl-1">
<a href="#" class="navbar-nav-link dropdown-toggle rounded" data-bs-toggle="dropdown">Full width</a>
<div class="dropdown-menu start-0 end-0 p-0 mx-xl-3">
...
</div>
</li>
</ul>
<!-- /mega menu sizing -->
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 rounded" data-bs-toggle="dropdown">Bordered header</a>
<div class="dropdown-menu wmin-xl-300 p-0">
<div class="border-bottom p-3">
<span class="fw-bold">Menu header</span>
</div>
<div class="p-3">
...
</div>
</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 rounded" data-bs-toggle="dropdown">Footer links</a>
<div class="dropdown-menu wmin-xl-300 p-0">
<div class="p-3 pb-0">
<span class="fw-bold">Menu header</span>
</div>
<div class="p-3">
...
</div>
<div class="d-flex border-top py-2 px-3">
<a href="#">Left link</a>
<a href="#" class="ms-auto">Right link</a>
</div>
</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">
<a href="#" class="navbar-nav-link dropdown-toggle rounded" data-bs-toggle="dropdown">Content grid</a>
<div class="dropdown-menu start-0 end-0 p-0 mx-xl-3">
<div class="p-3 pb-0">
<span class="fw-bold">12 columns grid</span>
</div>
<div class="p-3 pb-0">
<div class="row">
<div class="col-sm-6 col-xl-3 mb-3">
First column content
</div>
<div class="col-sm-6 col-xl-3 mb-3">
Second column content
</div>
<div class="col-sm-6 col-xl-3 mb-3">
Third column content
</div>
<div class="col-sm-6 col-xl-3 mb-3">
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 |
|---|---|
.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.nav-item-dropdown-[breakpoint] |
Combination of these classes keeps default dropdown menus appearance on mobile. Use it only in nav links outside .navbar-collapse container as the behaviour of menus in collapsible containers is different |
.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. |
.navbar-nav-link-icon |
For navigation items that contain icon only. This class adjusts left and right paddings to make sure that proportions are preserved. |
.dropdown-scrollable |
This class sets max-height to the dropdown body and adds vertical scrollbar. Can be added to child container to make only body scrollable or to the entire .dropdown-menu. Default max-height value is 340px. |
.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. |