Navbars
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.
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 or dropdown menus 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.
<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:
<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>
<!-- BEGIN NAVBAR LOGO -->
<a href="." aria-label="Tabler" class="navbar-brand navbar-brand-autodark me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-navbar-logo-color, var(--tblr-primary, #066fd1))" />
<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a" style="fill: var(--tblr-navbar-logo-color, #4a4a4a)" />
</svg>
</a>
<!-- END NAVBAR LOGO -->
<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">
<!-- Download SVG icon from http://tabler.io/icons/icon/home -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l-2 0l9 -9l9 9l-2 0" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
</span>
<span class="nav-link-title">Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-icon">
<!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M9 11l3 3l8 -8" />
<path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
</svg>
</span>
<span class="nav-link-title">Profile</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-icon">
<!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M9 11l3 3l8 -8" />
<path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
</svg>
</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>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.
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.
<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" 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.
<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>The preview navbar renders it from shared/data/languages.json with the showLanguageSelector prop of NavbarSide.
Accessibility
- Wrap each navigation region in
navand give it anaria-label, so a sidebar and a top bar can be told apart. - The toggler needs
aria-controlspointing at the collapsing element and a label such as "Toggle navigation". Bootstrap managesaria-expanded. - Mark the current page with
aria-current="page". - The brand link should say where it goes. A logo alone needs an
aria-labelorvisually-hiddentext. - A dropdown in the navbar follows the dropdown rules - the trigger is a
buttonor a link with anhref.
CSS
Sass variables
Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.
$navbar-height: 3.5rem;
$navbar-padding-y: 0.25rem;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: $nav-link-padding-x;
$navbar-hover-color: var(--body-color);
$navbar-border-width: var(--border-width);
$navbar-border-color: var(--border-color);
$navbar-floating-margin: 0.5rem;
$navbar-floating-border-radius: var(--border-radius-lg);
$navbar-light-color: var(--body-color);
$navbar-light-brand-color: var(--body-color);
$navbar-light-active-color: var(--body-color);
$navbar-light-hover-color: var(--body-color);
$navbar-light-disabled-color: var(--disabled-color);
$navbar-light-active-bg: var(--active-bg);
$navbar-light-icon-color: color-transparent(var(--body-color), 0.75);
$navbar-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: color-transparent(var(--emphasis-color), 0.15);
$navbar-light-brand-hover-color: $navbar-light-active-color;
$navbar-dark-color: color-transparent(var(--white), $text-secondary-opacity);
$navbar-dark-hover-color: color-transparent(var(--white), 0.75);
$navbar-dark-active-bg: var(--active-bg);
$navbar-dark-brand-color: $white;
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: var(--disabled-color);
$navbar-dark-icon-color: color-transparent(var(--white), $text-secondary-opacity);
$navbar-dark-toggler-border-color: color-transparent(var(--white), 0.1);
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
$navbar-brand-font-size: $h2-font-size;
$navbar-brand-padding-y: $nav-link-padding-y;
$navbar-brand-image-height: 2rem;
$navbar-brand-margin-end: 1rem;
$navbar-brand-font-weight: var(--font-weight-semibold);
$navbar-toggler-padding-y: 0.25rem;
$navbar-toggler-padding-x: 0.75rem;
$navbar-toggler-font-size: 1rem;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: 0;
$navbar-toggler-transition: box-shadow 0.15s ease-in-out;
$navbar-toggler-animation-time: 0.2s;
$navbar-overlap-height: 9rem;
$navbar-nav-link-hover-bg: var(--hover-bg);
$navbar-active-border-color: var(--primary);
