Multiple navbar components
In some cases you might need a complex component that consists
of multiple rows. This is where multiple content navbars can
be useful. Basically 2 or more navbars can be easily used
together, if one comes after another and navbar containers
have corresponding class names. Optionally you can add
.rounded-top and
.rounded-bottom classes to the first and last
navbars accordingly. Additionally, since navbar component has
bottom margin, you need to add .mb-0 class to all
navbars except the last one. Use other utility classes for
additional adjustments.
Multiple dark navbars
You can combine default dark navbar color with
custom colors just by adding .bg-[color] class
to the navbar container. As always, all navbar content is
adjusted accordingly. You can also use
border utility classes to control vertical and
horizontal borders stacking.
Multiple light navbars
Light navbar have white background color by
default defined in $navbar-light-bg variable.
You can use additional light color classes from color
system: .bg-light for light grey color,
.bg-[color].bg-opacity-10 for other light
colors. In some cases stacked light navbars require border
color or width adjustments, use border utility
classes to control border styles.
Mixing colors
Thanks to color helper classes, background and
border utility classes you can easily mix
background colors in multiple content navbars. The example
below demonstrates dark teal and
white navbars, but you can mix up colors
without any limits: dark/white, white/dark, white/alphas,
alphas/dark etc. Check out all available colors
here.
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.
Default colors markup:
<!-- First navbar component -->
<div class="navbar navbar-dark navbar-expand-lg rounded-top">
<!-- Mobile toggler -->
<div class="d-lg-none">
...
</div>
<!-- /mobile toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-component1">
...
</div>
<!-- /navbar content -->
</div>
<!-- /first navbar component -->
<!-- Second navbar component -->
<div class="navbar navbar-expand-lg rounded-bottom">
<!-- Mobile toggler -->
<div class="d-lg-none">
...
</div>
<!-- /mobile toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-component2">
...
</div>
<!-- /navbar content -->
</div>
<!-- /second navbar component -->
Custom colors markup:
<!-- First navbar component -->
<div class="navbar navbar-dark navbar-expand-lg rounded-top">
<!-- Mobile toggler -->
<div class="d-lg-none">
...
</div>
<!-- /mobile toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-component1">
...
</div>
<!-- /navbar content -->
</div>
<!-- /first navbar component -->
<!-- Second navbar component -->
<div class="navbar navbar-dark navbar-expand-lg rounded-bottom">
<!-- Mobile toggler -->
<div class="d-lg-none">
...
</div>
<!-- /mobile toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-component2">
...
</div>
<!-- /navbar content -->
</div>
<!-- /second 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.
|
