.content-inner container. No
additional class names or markup required.
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|-xxl} 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 navbar-static">
<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
| 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.
|
