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. |