navbar_component

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]-100 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-xl mb-0 rounded-top">

												<!-- Mobile toggler -->
												<div class="d-xl-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-xl rounded-bottom border-top-0">

												<!-- Mobile toggler -->
												<div class="d-xl-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-xl mb-0 rounded-top">

												<!-- Mobile toggler -->
												<div class="d-xl-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 navbar-expand-xl rounded-bottom border-top-0">

												<!-- Mobile toggler -->
												<div class="d-xl-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 `dark` background colors - default dark color is set in `$navbar-light-bg` variable, feel free to adjust the color according to your needs.
`.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-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 `.navbar-nav` list, 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
`.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.

Content Navbar - Multiple