Navbar
Navbars can be used to create navigation headers, with support for branding, navigation links, forms, and more.
Full example #
Navbars are useful navigation header components which can be made responsive using the built-in collapse functionality. Let's start with a full example which contains most of the sub-components available to use, such as branding, navigation links, dropdown, form, collapse, etc.
You can find detailed explanations about how it works and supported content after this example.
HTML
<nav class="navbar navbar-expand-lg" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-1" aria-controls="navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Docs</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Product
</a>
<ul class="dropdown-menu mt-lg-2 rounded-top-0">
<li><a class="dropdown-item" href="#">Page builder</a></li>
<li><a class="dropdown-item" href="#">Form builder</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Plan and pricing</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Blog</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search docs" aria-label="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Accessibility
The animation effect of this component is dependent on theprefers-reduced-motion
media query. See the reduced motion section of our accessibility documentation.
Full example How it works #
Here are some important things to know about navbars:
- Navbars require a wrapping
.navbar
with.navbar-expand-{sm|md|lg|xl|xxl}
for responsive collapsing. - By default, navbars have no background color set. You can change this using background utilities or inline CSS as shown above, where it is set to
var(--bs-content-bg)
. - Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways — e.g, using
.container
/.container-{sm|md|lg|xl|xxl}
. - Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on the collapse JavaScript plugin.
- Ensure accessibility by using a
<nav>
element or, if using a more generic element such as a<div>
, add arole="navigation"
to every navbar to explicitly identify it as a landmark region for users of assistive technologies. - Indicate the current item by using
aria-current="page"
for the current page oraria-current="true"
for the current item in a set.
Another small thing to note — dropdown menus in navbars are static in position. By default, dropdowns are positioned dynamically using Popper, but this is not the case here.
Full example Supported content #
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
.navbar-brand
for your company, product, or project name..navbar-nav
for a full-height and lightweight navigation (including support for dropdowns)..navbar-toggler
for use with our collapse plugin and other navigation toggling behavior.<form>
elements for search, sign ups, etc.- Flex and spacing utilities for any form controls and actions.
.collapse.navbar-collapse
for grouping and hiding navbar contents by a parent breakpoint..navbar-text
for adding vertically centered strings of text.- Add an optional
.navbar-scroll
to set a max-height and scroll expanded navbar content.
Except for the last two items on the list, all of the sub-components have been used in the full example above. Some of the sub-components are discussed in the next few sections.
Brand #
The .navbar-brand
can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles. It supports text and/or an image inside the element. Please note, when using both an image and text, you will need to add utility classes or custom styles to the <img>
, for example, .d-inline-block
and .align-text-top
.
HTML
<!-- Brand with text only -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid justify-content-center">
<a class="navbar-brand m-0" href="#">
Builder
</a>
</div>
</nav>
<!-- Brand with image only -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid justify-content-center">
<a class="navbar-brand m-0" href="#">
<img src="..." alt="Logo" width="24" height="24">
</a>
</div>
</nav>
<!-- Brand with text and image -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid justify-content-center">
<a class="navbar-brand m-0" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
</div>
</nav>
Navigation links #
Navbar navigation links build on our .nav
options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned. Add the .active
class on .nav-link
to indicate the current page, along with the aria-current
attribute for assistive technologies. Dropdowns are also supported, with dropdown menus requiring a wrapping element for positioning.
HTML
<nav class="navbar navbar-expand-md" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-2" aria-controls="navbar-collapse-2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Docs</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Product
</a>
<ul class="dropdown-menu dropdown-menu-end mt-md-2 rounded-top-0">
<li><a class="dropdown-item" href="#">Page builder</a></li>
<li><a class="dropdown-item" href="#">Form builder</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Plan and pricing</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Information
Thanks to the use of classes for the navigation links, you can avoid the list-based approach entirely if you like. Use a<div class="navbar-nav">
as the wrapper, and omit the <li class="nav-item">
elements. The benefit of using lists is mainly for assistive technologies.
Forms and buttons #
Place various form controls and components within a navbar by putting them inside a <form>
. Immediate child elements of .navbar
use flex layout and will default to justify-content: space-between
. Use additional flex utilities as needed to adjust this behavior. Input groups and buttons are also supported, so use them as you see fit. Please note, you can also place forms inside a .navbar-collapse
to make them responsive (as shown in the first example).
HTML
<!-- Navbar with form -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid flex-nowrap">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24">
</a>
<form class="d-flex">
<input class="form-control me-2" type="email" placeholder="Email" aria-label="Email">
<button class="btn btn-primary text-nowrap" type="submit">Sign up</button>
</form>
</div>
</nav>
<!-- Navbar with input group -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid flex-nowrap">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24">
</a>
<form>
<div class="input-group">
<input class="form-control" type="email" placeholder="Email" aria-label="Email">
<button class="btn btn-primary text-nowrap" type="submit">Sign up</button>
</div>
</form>
</div>
</nav>
<!-- Navbar with buttons -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid flex-nowrap">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
</a>
<div class="d-flex">
<a href="#" class="btn btn-secondary me-1">Sign in</a>
<a href="#" class="btn btn-primary">Sign up</a>
</div>
</div>
</nav>
Text #
Navbars may contain bits of text with the help of .navbar-text
. This class adjusts vertical alignment and horizontal spacing for strings of text. You can also place this text inside a .navbar-collapse
to make it responsive.
HTML
<!-- Navbar text -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<span class="navbar-text">
Make no-code apps
</span>
</div>
</nav>
Color scheme #
Create navbars of different colors with the color and background helpers. Please note, you should add data-bs-theme="dark"
or data-bs-theme="light"
directly to the .navbar-toggler
to create a light or dark variant that ignores the global color mode (and instead works with whatever color scheme you set with the helper class).
HTML
<!-- Dark navbar -->
<nav class="navbar text-bg-dark navbar-expand-md">
...
<button class="navbar-toggler" ... data-bs-theme="dark">
<span class="navbar-toggler-icon"></span>
</button>
...
</nav>
<!-- Primary navbar -->
<nav class="navbar text-bg-primary navbar-expand-md">
...
<button class="navbar-toggler" ... data-bs-theme="dark">
<span class="navbar-toggler-icon"></span>
</button>
...
</nav>
<!-- Warning navbar -->
<nav class="navbar text-bg-warning navbar-expand-md">
...
<button class="navbar-toggler" ... data-bs-theme="light">
<span class="navbar-toggler-icon"></span>
</button>
...
</nav>
HTML
<!-- Dark navbar -->
<nav class="navbar text-bg-dark navbar-expand-md">
...
<button class="navbar-toggler" ... data-bs-theme="dark">
<span class="navbar-toggler-icon"></span>
</button>
...
</nav>
<!-- Info navbar -->
<nav class="navbar text-bg-info navbar-expand-md">
...
<button class="navbar-toggler" ... data-bs-theme="dark">
<span class="navbar-toggler-icon"></span>
</button>
...
</nav>
<!-- Warning navbar -->
<nav class="navbar text-bg-warning navbar-expand-md">
...
<button class="navbar-toggler" ... data-bs-theme="light">
<span class="navbar-toggler-icon"></span>
</button>
...
</nav>
Local color mode
We generally do not recommend the local usage of color modes in Halfmoon, as they can cause some unexpected issues. However, this is one of two exceptions (other one being close buttons) where it is encouraged, because we have overridden the CSS to make sure they always work properly. Please note once again, you should add the attribute directly to the.navbar-toggler
.
Containers #
Although it's not required, you can wrap a navbar in a .container
/ .container-{sm|md|lg|xl|xxl}
to center it on a page–though note that an inner container is still required. Or you can add a container inside the .navbar to only center the contents of a fixed or static top navbar.
HTML
<!-- Navbar inside container -->
<div class="container">
<nav class="navbar navbar-expand-md" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
...
</nav>
</div>
Use any of the responsive containers to change how wide the content in your navbar is presented.
HTML
<!-- Responsive container inside navbar -->
<nav class="navbar navbar-expand-md" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-md">
...
</div>
</nav>
Placement #
Use the following position helpers to place navbars in non-static positions: .fixed-top
/ .fixed-bottom
(on .navbar
) to create navbars that are fixed to the top/bottom of the page, or .sticky-top
/ .sticky-bottom
to create navbars that are sticky to the top/bottom of the parent element.
Note on fixed positioning
Fixed navbars use position: fixed
, meaning they're pulled from the normal flow of the DOM and will require custom CSS to prevent overlap with other elements. For example, the following styles are recommended when using fixed navbars on top:
- In the
body {...}
CSS selector, addpadding-top
equal to theheight
of the navbar in the collapsed state. - In the
:target {...}
CSS selector, addscroll-margin-top
equal to or greater than theheight
of the navbar (again in the collapsed state).
Scrolling #
Add .navbar-nav-scroll
to a .navbar-nav
(or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at 75vh
(or 75% of the viewport height), but you can override that with the local CSS custom property --bs-navbar-height
or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.
Please note that this behavior comes with a potential drawback of overflow
—when setting overflow-y: auto
(required to scroll the content here), overflow-x
is the equivalent of auto
, which will crop some horizontal content.
Here's an example navbar using .navbar-nav-scroll
with style="--bs-scroll-height: 100px;"
, with some extra margin utilities for optimum spacing.
HTML
<!-- Navbar nav scrolling -->
<nav class="navbar navbar-expand-lg" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-7" aria-controls="navbar-collapse-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-7">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Docs</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Product
</a>
<ul class="dropdown-menu mt-lg-2 rounded-top-0">
<li><a class="dropdown-item" href="#">Page builder</a></li>
<li><a class="dropdown-item" href="#">Form builder</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Plan and pricing</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Blog</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search docs" aria-label="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Responsive behavior #
Navbars can use .navbar-toggler
, .navbar-collapse
, and .navbar-expand-{sm|md|lg|xl|xxl}
classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
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.
Responsive behavior Toggler #
Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand
, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles:
- Brand inside the collapse, with extra text added to the toggler
- Brand outside the collapse, before the toggler (all the examples above have this)
- Brand outside the collapse, after the toggler (toggler will be on the left of the brand)
HTML
<!-- 1. Brand inside collapse -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<button class="navbar-toggler d-flex align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-8" aria-controls="navbar-collapse-8" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="ms-2">Menu</span>
</button>
<div class="collapse navbar-collapse mt-3" id="navbar-collapse-8">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
...
</div>
</div>
</nav>
<!-- 2. Brand outside collapse, before toggler -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-9" aria-controls="navbar-collapse-9" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-9">
...
</div>
</div>
</nav>
<!-- 3. Brand outside collapse, after toggler -->
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-10" aria-controls="navbar-collapse-10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand me-0" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<div class="collapse navbar-collapse" id="navbar-collapse-10">
...
</div>
</div>
</nav>
Responsive behavior External content #
Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the .navbar
. Because our plugin works on the id
and data-bs-target
matching, this can be easily done.
Collapsed content
Toggleable via the navbar toggler
HTML
<!-- External collapse toggleable via navbar toggler -->
<div class="collapse border-bottom" id="external-collapse" style="background-color: var(--bs-content-bg);">
<div class="p-3">
<h5>Collapsed content</h5>
<p class="text-body-secondary m-0">Toggleable via the navbar toggler</p>
</div>
</div>
<nav class="navbar" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid justify-content-start">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#external-collapse" aria-controls="external-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mx-2" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<a href="#" class="btn btn-primary ms-auto">Open app</a>
</div>
</nav>
When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes before the toggler in the document's structure. We also recommend making sure that the toggler has the aria-controls
attribute, pointing to the id
of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
Responsive behavior Offcanvas #
Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas component. We extend both the offcanvas default styles and use our .navbar-expand-*
classes to create a dynamic and flexible navigation sidebar. Please note, if you want to create an offcanvas navbar that is always collapsed across all breakpoints, omit the .navbar-expand-*
class entirely.
In the example below, the navbar will expand on the large breakpoint and up. Below this however, everything other than the brand will be hidden inside an offcanvas which can be opened by clicking on the toggler.
HTML
<!-- Offcanvas in navbar -->
<nav class="navbar navbar-expand-lg" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar-offcanvas" aria-controls="navbar-offcanvas" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" id="navbar-offcanvas">
<div class="offcanvas-header border-bottom">
<a class="navbar-brand m-0" href="#">
<img src="..." alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
Builder
</a>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Docs</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Product
</a>
<ul class="dropdown-menu mt-lg-2 rounded-top-0">
<li><a class="dropdown-item" href="#">Page builder</a></li>
<li><a class="dropdown-item" href="#">Form builder</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Plan and pricing</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Blog</a>
</li>
</ul>
<form class="d-flex align-self-center" role="search">
<input class="form-control me-2" type="search" placeholder="Search docs" aria-label="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.