tabler/docs/content/ui/layout/navbars.mdx

---
title: Navbars
summary: A navbar is the horizontal bar at the top of the page with the logo, the main links and controls such as search or a user menu.
description: Responsive navigation bars, with the markup, the variants and a language selector.
related: [/ui/layout/page-layouts, /ui/components/dropdown]
sass-vars: navbar
---

import Example from '@components/Example.astro'
import Logo from '@shared/components/navbar/Logo.astro'
import Icon from '@ui/Icon.astro'

A navbar is the horizontal bar at the top of the page. It holds the logo, the main links and often a search field, [buttons](/ui/components/button) or [dropdown menus](/ui/components/dropdown) such as a user menu.

On small screens the links collapse behind a toggle button, and the same markup works in the light and the dark color mode.

## Sample navbar

Start with the `.navbar` class on a `header` element. `navbar-expand-md` sets the breakpoint at which the collapsed menu turns into a row of links, and `d-print-none` hides the bar when the page is printed.

```html
<header class="navbar navbar-expand-md d-print-none">...</header>
```

Inside it, a `container-xl` keeps the content aligned with the page. The full markup with the brand, the toggler, the links and a user menu looks like this:

<Example>
<header class="navbar navbar-expand-md d-print-none">
  <div class="container-xl">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <Logo class="me-3" />
    <div class="collapse navbar-collapse" id="navbar-menu">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">
            <span class="nav-link-icon">
              <Icon name="home" />
            </span>
            <span class="nav-link-title">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="nav-link-icon">
              <Icon name="checkbox" />
            </span>
            <span class="nav-link-title">Profile</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="nav-link-icon">
              <Icon name="checkbox" />
            </span>
            <span class="nav-link-title">Settings</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="navbar-nav flex-row order-md-last ms-auto">
      <div class="nav-item dropdown">
        <a href="#" class="nav-link d-flex lh-1 text-reset" data-bs-toggle="dropdown" aria-label="Open user menu">
          <span class="avatar avatar-sm" style="background-image: url(/static/avatars/044m.jpg)"></span>
          <div class="d-none d-xl-block ps-2">
            <div>Paweł Kuna</div>
            <div class="mt-1 small text-secondary">UI Designer</div>
          </div>
        </a>
        <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
          <a href="#" class="dropdown-item">Status</a>
          <a href="#" class="dropdown-item">Profile</a>
          <a href="#" class="dropdown-item">Feedback</a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">Settings</a>
          <a href="#" class="dropdown-item">Logout</a>
        </div>
      </div>
    </div>
  </div>
</header>
</Example>

## Floating navbar

Add `navbar-floating` to keep a gap between the navbar and the edges around it. The navbar gets a border on every side and rounded corners. It floats only from its `navbar-expand-*` breakpoint up. Below the breakpoint it stays attached to the edges, like a regular navbar.

<Example code={`<header class="navbar navbar-expand-md navbar-floating d-print-none">...</header>`}>
<header class="navbar navbar-expand navbar-floating d-print-none">
  <div class="container-xl">
    <Logo class="me-3" />
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#" aria-current="page">
          <span class="nav-link-title">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="nav-link-title">Profile</span>
        </a>
      </li>
    </ul>
  </div>
</header>
</Example>

The class works on the vertical sidebar too. The sidebar keeps its width, also when it is folded, and the page content next to it moves over by the same gap.

```html
<aside class="navbar navbar-vertical navbar-expand-lg navbar-floating">...</aside>
```

The gap is `0.5rem` by default. Change it with `$navbar-floating-margin` in SCSS.

To float the navigation of the whole page without touching the markup, set [`data-bs-navbar-style="floating"`](/ui/layout/page-layouts#floating-navigation) on `<html>`.

## Language selector

Add a language selector to the navbar as a dropdown. The toggle shows the current language code and the menu lists the languages with a `data-lang` attribute, so a script can switch the locale. Give the toggle an `aria-label`, because the code alone does not say what the control does.

<Example>
<div class="nav-item dropdown">
  <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" aria-label="Select language" data-bs-auto-close="outside" aria-expanded="false">EN</a>
  <div class="dropdown-menu dropdown-menu-arrow">
    <a class="dropdown-item" href="#" data-lang="cs">Čeština</a>
    <a class="dropdown-item" href="#" data-lang="de">Deutsch</a>
    <a class="dropdown-item" href="#" data-lang="en">English</a>
    <a class="dropdown-item" href="#" data-lang="pl">Polski</a>
  </div>
</div>
</Example>

The preview navbar renders it from `shared/data/languages.json` with the `showLanguageSelector` prop of `NavbarSide`.

## Accessibility

- Wrap each navigation region in `nav` and give it an `aria-label`, so a sidebar and a top bar can be told apart.
- The toggler needs `aria-controls` pointing at the collapsing element and a label such as "Toggle navigation". Bootstrap manages `aria-expanded`.
- Mark the current page with `aria-current="page"`.
- The brand link should say where it goes. A logo alone needs an `aria-label` or `visually-hidden` text.
- A dropdown in the navbar follows the [dropdown](/ui/components/dropdown) rules - the trigger is a `button` or a link with an `href`.