Fixed bottom navbar
Bottomfixednavbar is positioned relative to the screen's viewport and doesn't move when scrolled. To use, add .fixed-bottomclass to the .navbarcontainer and .navbar-bottomclass to the <body>container.
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 staticposition 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 displayutility classes. You can also control responsive collapsing breakpoint directly in the markup. Navbar component is responsive by default and requires .navbarand .navbar-expand{-sm|-md|-lg|-xl}classes.
Static navbars
By default, top and bottom navbars have staticposition and scroll away along with content. This use case doesn't require any additional classes for .navbarand <body>containers, this means navbar appearance depends on its placement: in the template top static navbar is the first direct child of <body>and placed before.page-contentcontainer, bottom static navbar is placed afterit.
Fixed navbars
Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-topon the <body>) to prevent overlap with other elements. Thanks to the power of SASS, padding classes are dynamically calculated based on brand and nav link heights. Table below lists all available body and navbar classes.
Navbar markup
Navbar markup consists of a set of containers with mandatory and optional classes: .navbaris a wrapper, this class is required for all types of navbars; .navbar-[color]- sets main background color and adjusts content color; .navbar-expand-[breakpoint]- responsible for collapsing navbar content behind the button on small screens; .navbar-component- displays navbar as a stand alone component with borders and rounded corners. See the table below for a full list of classes.
Static navbar markup:
<!-- Document body --><body> <!-- Main navbar --> <div class="navbar navbar-dark navbar-expand-md"> <!-- Navbar brand --> <div class="navbar-brand"> ... </div> <!-- /navbar brand --> <!-- Mobile toggler --> <div class="d-md-none"> ... </div> <!-- /mobile toggler --> <!-- Navbar content --> <div class="collapse navbar-collapse" id="navbar"> ... </div> <!-- /navbar content --> </div> <!-- /main navbar --></body><!-- /document body -->Fixed navbar markup:
<!-- Document body --><body class="navbar-top"> <!-- Main navbar --> <div class="navbar navbar-dark navbar-expand-md fixed-top"> <!-- Navbar brand --> <div class="navbar-brand"> ... </div> <!-- /navbar brand --> <!-- Mobile toggler --> <div class="d-md-none"> ... </div> <!-- /mobile toggler --> <!-- Navbar content --> <div class="collapse navbar-collapse" id="navbar"> ... </div> <!-- /navbar content --> </div> <!-- /main navbar --></body><!-- /document body -->Navbar classes
| 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-light
|
Required |
This class is used for darkbackground colors - default dark color is set in $navbar-light-bgvariable, feel free to adjust the color according to your needs.
|
.navbar-light.alpha-*
|
Optional |
Combination of these classes allows you to set custom lightcolor to the lightnavbar. Note - .navbar-lightis required, it's responsible for correct content styling.
|
.navbar-dark
|
Required |
This class is used for darkbackground colors - default dark color is set in $navbar-dark-bgvariable, feel free to adjust the color according to your needs.
|
.navbar-dark.bg-*
|
Optional |
Combination of these classes allows you to set custom darkcolor to the darknavbar. Note - .navbar-darkis required, it's responsible for correct content styling.
|
.navbar-expand-[breakpoint]
|
Optional |
For navbars that never collapse, add the .navbar-expandclass on the navbar. For navbars that always collapse, don’t add any .navbar-expandclass. 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 .navbar-navlist, it sets proper styling for links in light and dark navbars.
|
.navbar-text
|
Required | This class adjusts vertical alignment and horizontal spacing for strings of text |
.navbar-component
|
Optional | Display navbar as a stand alone component, with border and rounded corners. |
.fixed-top
|
Optional |
Makes navbar sticked to the topof the page. Requires proper class for <body>container, see the table below.
|
.fixed-bottom
|
Optional |
Makes navbar sticked to the bottomof the page. Requires proper class for <body>container, see the table below.
|
.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
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 toppadding 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 bottompadding 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 topspacing of <body>container, if navbar has optional height. Available sizes: small (*-sm) and large (*-lg). Default navbar requires .navbar-topclass only.
|
.navbar-bottom-[size]
|
Controls bottomspacing of <body>container, if navbar has optional height. Available sizes: small (*-sm) and large (*-lg). Default navbar requires .navbar-bottomclass only.
|
.navbar-top-[size]-[size]
|
Use these classes if the layout has multiple topnavbars, 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: lgif large height, mdis default height smis small height.
|
.navbar-bottom-[size]-[size]
|
Use these classes if the layout has multiple bottomnavbars, 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: lgif large height, mdis default height smis small height.
|