Single navbar component

Standard use case for navbar is main top or optional bottom navigation with various components. But in some cases, such as toolbars with form components (filters, content navigation, tabs etc), navbar as a stand alone component can be very useful. For such cases use standard navbar markup with spacing and border helper classes added to the .navbar container and optional .rounded class for rounded corners. And now you can use navbar wherever you want within .page-content container. Please note - nested navbars are not supported.

Dark navbar component

Unlike Bootstrap's default navbar color option, where all navbars require background helper class, default background colors are set in SASS and defined in $navbar-dark-bg and $navbar-light-bg variables. So dark navbar component requires only default container classes along with optinal .rounded class to make all corners rounded. Additionally you can add .bg-[color] helper class to apply custom background color.

Light navbar component

Light content navbar has dark border color with alpha transparency by default. You can also use additional .bg-[color].bg-opacity-10 color classes along with .border-[color] border classes if you want to highlight the navbar with custom light color. All colors within light navbar depend on main body color, keep that in mind if you want to change main text color in SASS variables.

Navbar component markup

Navbar component markup is similar to default navbar markup. But in most cases navbar component doesn't use .navbar-brand container that occupies left navbar side, since content navbar has slightly different purpose and doesn't need brand logo. Use border and margin helper classes to add bottom spacing and borders, and .rounded class to make it rounded. Navbar component supports all available navbar styling and sizing options, including all navbar components.

Light navbar markup example:

										
											<!-- Light navbar -->
											<div class="navbar">
												<div class="container-fluid">

													<!-- Left content -->
													<ul class="nav">
														<li class="nav-item">
															<a href="#" class="navbar-nav-link rounded">Link</a>
														</li>
														...
													</ul>
													<!-- /left content -->


													<!-- Right content -->
													<div class="d-flex align-items-center w-100 w-sm-auto ms-xl-auto">
														...
														<ul class="nav ms-auto ms-sm-2">
															<li class="nav-item">
																<a href="#" class="navbar-nav-link rounded">Link</a>
															</li>
															...
														</ul>
													</div>
													<!-- /right content -->

												</div>
											</div>
											<!-- /light navbar -->
										
									

Dark navbar markup example:

										
											<!-- Dark navbar component -->
											<div class="navbar navbar-dark">
												<div class="container-fluid">

													<!-- Left content -->
													<ul class="nav">
														<li class="nav-item">
															<a href="#" class="navbar-nav-link rounded">Link</a>
														</li>
														...
													</ul>
													<!-- /left content -->


													<!-- Right content -->
													<div class="d-flex align-items-center w-100 w-sm-auto ms-xl-auto">
														...
														<ul class="nav ms-auto ms-sm-2">
															<li class="nav-item">
																<a href="#" class="navbar-nav-link rounded">Link</a>
															</li>
															...
														</ul>
													</div>
													<!-- /right content -->

												</div>
											</div>
											<!-- /dark navbar component -->
										
									
Navbar classes
Navbar is a complex, but very flexible component. It supports different types of content, responsive utilities manage content appearance and spacing on various screen sizes, supports multiple sizing and color options etc. And everything can be changed on-the-fly directly in HTML markup. If you can't find an option you need, you can always extend default SCSS code. Table below demonstrates all available classes that can be used within the navbar:
Class Type Description
.navbar Required Default navbar class, must be used with any navbar type and color. Responsible for basic navbar and navbar components styling as a parent container.
.navbar-dark Required This class is used for dark background colors - default dark color is set in $navbar-dark-bg variable, feel free to adjust the color according to your needs.
.navbar.bg-* Optional Combination of these classes allows you to set custom light color to the default light navbar.
.navbar-dark.bg-* Optional Combination of these classes allows you to set custom dark color to the dark navbar. Note - .navbar-dark is required, it's responsible for correct content styling.
.navbar-expand-[breakpoint] Optional For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class. Otherwise use this class to change when navbar content collapses behind a button.
.navbar-brand Required Class for logo container. It can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles
.navbar-toggler Required This class needs to be added to the navbar toggle button that toggles navbar content on small screens. Always used with visibility utility classes.
.navbar-collapse Required Groups and hides navbar contents by a parent breakpoint. Requires an ID for targeting collapsible container when sidebar content is collapsed.
.navbar-nav Required Responsive navigation container class that adds default styling for navbar navigation.
.nav-item Required Wrapper class for immediate parents of all navigation links. Responsible for correct styling of nav items
.navbar-nav-link Required Custom class for links within .nav list, it sets proper styling for links in light and dark navbars.
.navbar-nav-link-icon Optional For navigation items that contain icon only. This class adjusts left and right paddings to make sure that proportions are preserved.
.navbar-text Required This class adjusts vertical alignment and horizontal spacing for strings of text
.sticky-top Optional Adds position: sticky; to the navbar - it's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed. Support is limited.
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