Rounded links
By default, all navigation links have padding and background color, but don't have rounded corners. This can be controlled with our border radius utility classes, just add .rounded or .rounded-[1|2|3|4|5] classes to the base .navbar-nav-link element. Make sure you also have vertical spacing in navbar container. All links with icons only are displayed as squares with equal width and height.
Light navbar:
Dark navbar:
Fully rounded pills
To make navigation links fully rounded, add .rounded-pill to each .navbar-nav-link element. Links with text are displayed as pills in this case and links with icons only are equally proportional (height = width). This logic also works in all navbar sizes. Edit $navbar-link-padding-[x|y] or --navbar-link-padding-[x|y] variables to change the default links size. Inner navbar spacing is controlled via padding utility classes.
Light navbar:
Dark navbar:
Transparent links
Background color in navigation links can be disabled by adding .bg-transparent utility class. If you have links inside .navbar-collapse container that stack on mobile, you can control left and right padding on desktop and mobile separately with our responsive utility classes. In the examples below we use .px-0.px-[breakpoint]-2. If outside collapsible container, no padding adjustments are necessary.
Light navbar:
Dark navbar:
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 -->
