Navigation
Victoria Baker
 Santa Ana, CA

Content Navbar- Multiple

Actions
View reportsEdit reportsStatistics
Export
Export to PDFExport to CSV
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 both have .navbar-componentclass added to .navbarcontainers. Optionally you can add .rounded-topand .rounded-bottomclasses to the first and last navbars accordingly. Additionally, since navbar component has bottom margin, you need to add .mb-0class to all navbars except the last one. Use other utility classes for additional adjustments.

Multiple dark navbars

You can combine default darknavbar color with custom colors just by adding .bg-[color]class to the navbar container. As always, all navbar content is adjusted accordingly. Both navbars still require .navbar-componentclass. You can also use borderutility classes to control vertical and horizontal borders stacking.

Multiple light navbars

Light navbar have whitebackground color by default defined in $navbar-light-bgvariable. You can use additional light color classes from color system: .bg-lightfor light grey color, .alpha-[color]for other light colors. In some cases stacked light navbars require border color or width adjustments, use borderutility classes to control border styles.

Mixing colors

Thanks to color helper classes, backgroundand borderutility classes you can easily mix background colors in multiple content navbars. The example below demonstrates darkteal and whitenavbars, 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-brandcontainer that occupies left navbar side, since content navbar has slightly different purpose and doesn't need brand logo. Use .navbar-componentclass to add bottom spacing and borders, and .roundedclass 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-md navbar-component mb-0 rounded-top">      <!-- Mobile toggler -->      <div class="d-md-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-light navbar-expand-md navbar-component rounded-bottom border-top-0">    <!-- Mobile toggler -->      <div class="d-md-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 bg-teal navbar-expand-md navbar-component mb-0 rounded-top">    <!-- Mobile toggler -->      <div class="d-md-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 bg-teal-400 navbar-expand-md navbar-component rounded-bottom border-top-0"> <!-- Mobile toggler -->      <div class="d-md-none">              ...     </div>       <!-- /mobile toggler -->     <!-- Navbar content -->      <div class="collapse navbar-collapse" id="navbar-component2">                ...     </div>       <!-- /navbar content --></div><!-- /second navbar component -->
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-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-header Optional Navbar brand wrapper. This class is responsible for navbar logo section with custom background color. Must contain children .navbar-brandcontainer(s).
.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-brand-[md, xs] Required These classes toggle logos - xsis hidden by default and is visible if main sidebar is collapsed, mdis visible by default and is hidden when main sidebar is expanded
.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
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:
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.