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.
Light navbar links:
Image
SVG image
Dark navbar links:
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.
|
Navigation markup
Navigation alignment
Navigation in the navbar can be aligned to the
left, right or
center. By default it's aligned to the left
(right in RTL direction). Since parent container is flexible,
you need to use
flex utility classes
to change default alignment: add
.justify-content-[breakpoint]-[property] to
.navbar-collapse container and/or responsive
spacing utilities to push content to the right
and horizontal spacing between navigation containers. On
mobiles all navigation items within
.navbar-collapse container are stackable by
default. Make sure you use same breakpoint in all navbar
elements. Examples below demonstrate
left (start) (default) and
right (end) nav 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 ms-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 item states
Navbar navigation items support 2 state classes:
active and disabled. In
active state nav links appear pressed, with a
darker background and stronger text. Please note:
.active class 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-toggle navigation
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-bs-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-bs-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 -->
