Navbars
A site's header: its name, its main links and what stands beside them. Where the header is too narrow for the links, a button opens them as a panel at the side of the screen.
Examples
navbar on the <header>, navbar-brand on the site's name, navbar-toggler on the button, and the links in a <nav class="drawer" popover> after it: drawer-header with the panel's title and its close button, drawer-body with a nav navbar-nav. md:navbar-expand sets the links in the row where the header is 768 px wide or wider; below that the button opens them. The width is the header's own, so a header in a column folds as one on a phone does.
<header class="navbar md:navbar-expand">
<a class="navbar-brand" href="#navbar-site"><i class="bi bi-sun" aria-hidden="true"></i>Example Tours</a>
<button class="btn btn-text btn-icon navbar-toggler" type="button" commandfor="navbar-site-menu" command="toggle-popover" aria-label="Menu"><i class="bi bi-list" aria-hidden="true"></i></button>
<nav class="drawer" id="navbar-site-menu" popover aria-labelledby="navbar-site-title">
<div class="drawer-header">
<h2 class="drawer-title" id="navbar-site-title">Menu</h2>
<button class="btn-close" type="button" commandfor="navbar-site-menu" command="hide-popover" aria-label="Close"></button>
</div>
<div class="drawer-body">
<div class="nav navbar-nav">
<a class="nav-link" href="#navbar-site" aria-current="page">Excursions</a>
<a class="nav-link" href="#navbar-site">Transfers</a>
<a class="nav-link" href="#navbar-site">Villas</a>
<a class="nav-link" href="#navbar-site">Reviews</a>
</div>
<a class="btn btn-primary" href="#navbar-site">Book a tour</a>
</div>
</nav>
</header>More links than room
With nav-overflow around the links, a header that is wide enough for its row but not for all of them keeps the first ones and moves the rest into a “More” menu; only below its width does the whole row go behind the button. A link that opens a menu folds with it: “More” shows that menu's items as a group under the link's words. This header is 640 px wide at most and sets its row from 576 px with sm:navbar-expand.
<header class="navbar sm:navbar-expand max-w-640">
<a class="navbar-brand" href="#navbar-overflow"><i class="bi bi-sun" aria-hidden="true"></i>Example Tours</a>
<button class="btn btn-text btn-icon navbar-toggler" type="button" commandfor="navbar-overflow-menu" command="toggle-popover" aria-label="Menu"><i class="bi bi-list" aria-hidden="true"></i></button>
<nav class="drawer" id="navbar-overflow-menu" popover aria-labelledby="navbar-overflow-title">
<div class="drawer-header">
<h2 class="drawer-title" id="navbar-overflow-title">Menu</h2>
<button class="btn-close" type="button" commandfor="navbar-overflow-menu" command="hide-popover" aria-label="Close"></button>
</div>
<div class="drawer-body">
<div class="nav-overflow">
<div class="nav navbar-nav">
<a class="nav-link" href="#navbar-overflow">Excursions</a>
<a class="nav-link" href="#navbar-overflow">Transfers</a>
<a class="nav-link" href="#navbar-overflow" aria-current="page">Villas</a>
<a class="nav-link" href="#navbar-overflow">Yachts</a>
<a class="nav-link" href="#navbar-overflow">Reviews</a>
<a class="nav-link" href="#navbar-overflow">Blog</a>
<button class="nav-link" type="button" commandfor="navbar-overflow-help" command="toggle-popover" aria-haspopup="menu">Help<i class="bi bi-chevron-down" aria-hidden="true"></i></button>
<div class="menu" id="navbar-overflow-help" popover role="menu" aria-label="Help">
<a class="menu-item" role="menuitem" href="#navbar-overflow">Questions and answers</a>
<a class="menu-item" role="menuitem" href="#navbar-overflow">Contacts</a>
<a class="menu-item" role="menuitem" href="#navbar-overflow">Cancellation policy</a>
</div>
</div>
</div>
<a class="btn btn-primary" href="#navbar-overflow">Book</a>
</div>
</nav>
</header>Always behind the button
Without a navbar-expand class the links always wait behind the button, for a header that keeps its row for something else. navbar-text is a line of text in the row. data-theme="dark" on the header turns it and its panel dark on a light page, and drawer-start opens the panel at the start edge.
<header class="navbar bg-body" data-theme="dark">
<a class="navbar-brand" href="#navbar-folded"><i class="bi bi-sun" aria-hidden="true"></i>Example Tours</a>
<span class="navbar-text ms-auto">Open daily, 8 a.m. to 8 p.m.</span>
<button class="btn btn-text btn-icon navbar-toggler" type="button" commandfor="navbar-folded-menu" command="toggle-popover" aria-label="Menu"><i class="bi bi-list" aria-hidden="true"></i></button>
<nav class="drawer drawer-start" id="navbar-folded-menu" popover aria-labelledby="navbar-folded-title">
<div class="drawer-header">
<h2 class="drawer-title" id="navbar-folded-title">Menu</h2>
<button class="btn-close" type="button" commandfor="navbar-folded-menu" command="hide-popover" aria-label="Close"></button>
</div>
<div class="drawer-body">
<div class="nav navbar-nav">
<a class="nav-link" href="#navbar-folded" aria-current="page">Excursions</a>
<a class="nav-link" href="#navbar-folded">Transfers</a>
<a class="nav-link" href="#navbar-folded">Villas</a>
<a class="nav-link" href="#navbar-folded">Contacts</a>
</div>
</div>
</nav>
</header>Where the row starts
The class says from which width of the header its links stand in the row; below it the button opens them.
| Class | The links in the row |
|---|---|
navbar-expand | Always |
sm:navbar-expand | From 576 px |
md:navbar-expand | From 768 px |
lg:navbar-expand | From 1024 px |
xl:navbar-expand | From 1280 px |
2xl:navbar-expand | From 1536 px |
| None | Never: the button opens them |
At the top while the page scrolls
A header that stays at the top takes position-sticky top-0 and a background: bg-body, or navbar-translucent, which lets the page show through it, blurred.
<header class="navbar navbar-translucent md:navbar-expand position-sticky top-0 z-3">…</header>Keyboard and accessibility
- The header is a
<header>and the links a<nav>named by the panel's title, so a screen reader finds the same navigation in the row and in the panel. - The button says whether the panel is open. Tab from it goes into the panel; Esc or a click outside closes it and brings the focus back to the button. The panel also closes when a link in it is followed, when the focus leaves it for the page, and when the header grows wide enough for its row. The page under it does not scroll while it is open.
- The link the person is on is
aria-current="page", underlined so it shows without color, in forced colors too. - A link that opens a menu is a
<button>witharia-haspopup="menu", and its menu keeps its keys in the row and in the panel. js/navbar.jscloses the panel; the button, the panel and the row are the browser's commands and CSS.
Tokens
From css/components/navbar.css, which declares no custom property of its own.
It reads the theme's --redz-space-8, --redz-space-16, --redz-text, --redz-fs-18, --redz-text-muted, --redz-space-12, --redz-bg.
From Bootstrap 5.3
| Bootstrap 5.3 | REDZ.UI | Change | Note |
|---|---|---|---|
navbar-collapse | drawer | review | a <nav class="drawer" popover id="ID"> after the toggler: drawer-header with its title, the links in drawer-body |
navbar-dark | - | review | data-theme="dark" on the navbar, with a background such as bg-body |
navbar-nav-scroll | - | remove | the panel scrolls by itself |
navbar-toggler-icon | bi bi-list | rename | an icon in the toggler |