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>

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 a role="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 or aria-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:

  1. .navbar-brand for your company, product, or project name.
  2. .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  3. .navbar-toggler for use with our collapse plugin and other navigation toggling behavior.
  4. <form> elements for search, sign ups, etc.
  5. Flex and spacing utilities for any form controls and actions.
  6. .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.
  7. .navbar-text for adding vertically centered strings of text.
  8. 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>

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>

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>

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.

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:

  1. Brand inside the collapse, with extra text added to the toggler
  2. Brand outside the collapse, before the toggler (all the examples above have this)
  3. 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>
Up next
Navs and tabs

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.