Tabbed nav

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.

Light navbar tabs:

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.

Dark navbar tabs:

Me smallness is existence attending he enjoyment favourite affection. Feebly do engage of narrow.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor sunt.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Navigation classes
This table contains all classes related to the horizontal navbar navigation. Navbar navigation links build on default .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 -->
										
									
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless