Navbars

Overview

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.

Make sure the breakpoint in navbar is similar to breakpoint in sidebars since all sidebar togglers are displayed in navbar on certain breakpoints. All navbar examples can be found in template's HTML files.

Table below describes all navbar types and combinations available:

Option	Description
Type
Single navbar	Single navbar. Collapsible navbar, always displayed full width without spacings (except navbar component) and on top by default. Supports different navbar components and usually appears as a main navbar with branding info, user info and navigation.
Multiple navbars	Multiple navbars have additional display options. They can be placed one after another, mixed with page header content and main content. Second sidebar is usually used as a separate component with main navigation (in horizontal navigation layout) and alternative content.
Navbar component	Displayed as a stand-alone component: includes spacings, borders and rounded corners. Can be placed anywhere - content area, footer, header or used as a main navbar. Supports all available navbar components.
Positioning
Top single	Single top navbar, usually a main navigation toolbar.
Top multiple	Double top navbar. Can be both static or fixed, check navbar related pages.
Bottom single	Single bottom navbar, usually a main navigation toolbar.
Bottom multiple	Double bottom navbar. Can be both static or fixed, check navbar related pages.
Inside content area	Content navbar. Can be placed in any container within `.content` container. Useful for action toolbars
Variations
Fixed	Default option. Always sticked to the page top and always visible. In static layout requires additional classes in `<body>` tag to add top padding to the document. Refer to the table below for more information
Static	Means navbar is scrolled out along with content. Only available in static layout and layouts #3, 4, 5
Hideable	Hide navbar on scroll down and display on scroll up. Animated by default and supports both top and bottom placement. Only available in static layout and layouts #3, 4, 5
Styling
Light	Light background with adapted components: navigation, links etc. Doesn't require any color classes.
Dark	Dark background with adapted components: navigation, links etc. Requires `.navbar-dark` class added to the `<navbar>` container.
Custom color	Custom background color. Requires `.navbar-dark` class and `.bg-*` color class added to the `<navbar>` container.

Navbar markup

Navbar markup is identical in all layout variations and matches default Bootstrap's markup. The only difference is navbar placement and type. Navbar component uses flexbox model, this means almost all components are vertically centered by default. Below you'll find markup examples of different variations of navbar component.

Static navbar

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. In layout 1 and 6 there's no difference between fixed and static since it's static by default, but behaves as fixed due to layout config.

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

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

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


															<!-- Navbar brand -->
															<div class="navbar-brand flex-1 flex-lg-0">
																...
															</div>
															<!-- /navbar brand -->


															<!-- Left navigation (remains visible on mobile) -->
															<ul class="nav">
																...
															</ul>
															<!-- /left navigation (remains visible on mobile) -->


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


															<!-- Content that remains visible on mobile -->
															<div class="nav justify-content-end order-1 order-lg-2">
																...
															</div>
															<!-- /content that remains visible on mobile -->

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


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

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

Top fixed navbar

Top fixed navbar markup is similar to static, the only difference is it requires .fixed-top class added to the <navbar> container and proper body class to add top padding. Only available in layouts 3, 4, 5 and in static layouts of layouts 1 and 6.

											
												<!-- Document body -->
												<body class="navbar-top">

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

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


															<!-- Navbar brand -->
															<div class="navbar-brand flex-1 flex-lg-0">
																...
															</div>
															<!-- /navbar brand -->


															<!-- Left navigation (remains visible on mobile) -->
															<ul class="nav">
																...
															</ul>
															<!-- /left navigation (remains visible on mobile) -->


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


															<!-- Content that remains visible on mobile -->
															<div class="nav justify-content-end order-1 order-lg-2">
																...
															</div>
															<!-- /content that remains visible on mobile -->

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


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

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

Bottom fixed navbar

Bottom fixed navbar markup is similar to static and top fixed, the only difference is it requires .fixed-bottom class added to the <navbar> container and proper body class to add bottom padding. Only available in layouts 3, 4, 5 and in static layouts of layouts 1 and 6.

											
												<!-- Document body -->
												<body class="navbar-bottom">

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


													<!-- Bottom navbar -->
													<div class="navbar navbar-sm navbar-footer fixed-bottom border-top">
														<div class="container-fluid"> 

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


															<!-- Navbar brand -->
															<div class="navbar-brand flex-1 flex-lg-0">
																...
															</div>
															<!-- /navbar brand -->


															<!-- Left navigation (remains visible on mobile) -->
															<ul class="nav">
																...
															</ul>
															<!-- /left navigation (remains visible on mobile) -->


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


															<!-- Content that remains visible on mobile -->
															<div class="nav justify-content-end order-1 order-lg-2">
																...
															</div>
															<!-- /content that remains visible on mobile -->

														</div>
													</div>
													<!-- /bottom navbar -->

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

Collapsed navbar

There is one additional option, when navbar doesn't have a logo and used as a toolbar. In this case the whole navbar becomes a link on mobiles and tables, all navbar content opens on click. Supports all options stated above:

											
												<!-- Document body -->
												<body>
													
													<!-- Footer -->
													<div class="navbar navbar-expand-lg navbar-static border-top">
														<div class="container-fluid"> 
															<div class="text-center d-lg-none w-100">
																<button type="button" class="navbar-toggler dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#navbar-second">
																	<i class="ph-list ms-2"></i>
																	Bottom navbar
																</button>
															</div>

															<div class="navbar-collapse collapse" id="navbar-second">
																...
															</div>
														</div>
													</div>
													<!-- /footer -->

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

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.

These class names work only in layout 1, 2 and 6 in static version and layouts 3, 4, 5 by default.

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.

Limitless