Multiple main navbars
You can have maximum of 2 top fixed navbars - since the element is removed from the normal document flow and no space is created for the element in the page layout, <body> requires additional classes in order to set correct top padding. That's why both navbars need to be wrapped in .fixed-top container and <body> container needs to have .navbar-[size]-[size]-top class. See the table below for classes explanation.
Navbar component

Navbar is a navigation component, usually displayed on top of the page and includes brand logo, navigation, notifications, user menu, language switcher and other components. By default, navbar has top fixed position and is a direct child of <body> container. Navbar toggler appears next to the brand logo on small screens and can be easily adjusted with display utility classes. You can also control responsive collapsing breakpoint directly in the markup. Navbar component is responsive by default and requires .navbar and .navbar-expand{-sm|-md|-lg|-xl} classes. Main navigation bar also has static position, but due to the nature of the general layout, it's moved outside all scrolable containers so that it always appears to be sticked to the top.

Static navbars

By default, top and bottom navbars in content area have static position and scroll away along with content. This use case doesn't require any additional classes for .navbar and <body> containers, this means navbar appearance depends on its placement: in the template top static navbar is the first direct child of .content-inner or .content containers.

Fixed navbars

Fixed navbars depend on location in containers. All navbars placed inside .content-inner container scroll away with the content. Once they are moved outside .content-inner container and placed before or after it, navbar becomes "fixed". It will push the content section up or down and will be always displayed within the viewport despite the scrolling position. None of these options requires any additional class names either in containers or navbar itself. Table below lists all available body and navbar classes.

Navbar markup

Navbar markup consists of a set of containers with mandatory and optional classes: .navbar is a wrapper, this class is required for all types of navbars; .navbar-[color] - sets main background color theme and adjusts content color; .navbar-expand-[breakpoint] - responsible for collapsing navbar content behind the button on small screens. See the table below for a full list of classes.

Default navbar markup:

								
									<!-- Document body -->
									<body>

										<!-- Main navbar -->
										<div class="navbar navbar-dark navbar-static navbar-expand-lg">
											<div class="container-fluid">

												<!-- Mobile togglers -->
												<div class="d-flex d-lg-none me-2">
													...
												</div>
												<!-- /mobile togglers -->


												<!-- Navbar brand -->
												<div class="d-inline-flex flex-1 flex-lg-0">
													<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
														...
													</a>
												</div>
												<!-- /navbar brand -->


												<!-- Left content -->
												<div class="flex-row">
													...
												</div>
												<!-- /left content -->


												<!-- Collapsible navbar content (center) -->
												<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
													...
												</div>
												<!-- /collapsible navbar content (center) -->


												<!-- Right content -->
												<div class="flex-row justify-content-end order-1 order-lg-2">
													...
												</div>
												<!-- /right content -->

											</div>
										</div>
										<!-- /main navbar -->


										<!-- Page content -->
										<div class="page-content">
											...
										</div>
										<!-- /page content -->

									</body>
									<!-- /document body -->
								
							

Content navbar markup:

								
									<!-- Content navbar -->
									<div class="navbar navbar-dark navbar-expand-xl">
										<div class="container-fluid">

											<!-- Mobile toggler -->
											<div class="text-center d-xl-none w-100">
												...
											</div>
											<!-- /mobile toggler -->


											<!-- Content collapsed on mobile -->
											<div class="navbar-collapse collapse" id="navbar-demo3-mobile">
												...
											</div>
											<!-- /content collapsed on mobile -->

										</div>
									</div>
									<!-- /content navbar -->
								
							
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.
Body classes
If you want to place navbar in non-static positions, you can choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and require custom classes added to the <body> container to prevent overlap with other elements. The following table demonstrates the list of classes for <body> container if navbar has non-static position:
Class Description
.navbar-top This class adds top padding to the <body> container. Works only with default navbar height. If another height is specified, apply another class (see the line below).
.navbar-bottom This class adds bottom padding to the <body> container. Works only with default navbar height. If another height is specified, apply another class (see the line below).
.navbar-top-[size] Controls top spacing of <body> container, if navbar has optional height. Available sizes: small (*-sm) and large (*-lg). Default navbar requires .navbar-top class only.
.navbar-bottom-[size] Controls bottom spacing of <body> container, if navbar has optional height. Available sizes: small (*-sm) and large (*-lg). Default navbar requires .navbar-bottom class only.
.navbar-[size]-[size]-top Use these classes if the layout has multiple top navbars, where first [size] is the size of the first navbar, second [size] - height of the second navbar. In this particular use case, [size] can be: lg if large height, md is default height sm is small height.
.navbar-[size]-[size]-bottom Use these classes if the layout has multiple bottom navbars, where first [size] is the size of the first navbar, second [size] - height of the second navbar. In this particular use case, [size] can be: lg if large height, md is default height sm is small height.
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