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
| 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.
|
