# 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 `

`, `navbar-brand` on the site's name, `navbar-toggler` on the button, and the links in a `

` 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. ```html ``` ### More links than room With [`nav-overflow`](nav.md) 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](menu.md) 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`. ```html ``` ### 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. ```html ``` ## 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. ```html ``` ## Keyboard and accessibility - The header is a `

` and the links a `

` 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 `