--- title: "Navigation menu" description: "A site's main navigation: links, and buttons that open panels of links, from simple lists to mega menus." url: "https://susonwaiba.github.io/htmx-ui/docs/components/navigation-menu" section: "Components" --- # Navigation menu A site's main navigation: links, and buttons that open panels of links, from simple lists to mega menus. ```html ``` ## Markup - A ` ``` ## Indicator `.navigation-menu-indicator` on the nav adds an arrow pointing from the open trigger to its panel. ```html ``` ## Vertical `.navigation-menu-vertical` stacks the items, for a sidebar or a menu on a small screen. Panels open in place under their trigger and push the items below down; they open by click or keyboard only, never on hover, and grids become a single column. ```html ``` ## Small screens A horizontal menu with wide panels doesn't fit a phone, and there is no hover there. Show it from the `md` breakpoint up, and below that a button that opens the same links in a vertical menu: in a [collapsible](https://susonwaiba.github.io/htmx-ui/docs/components/collapsible) under the header, as here, or in a [sheet](https://susonwaiba.github.io/htmx-ui/docs/components/sheet) from the side. Narrow the window to see the switch. ```html
``` Only one of the two menus is displayed at a time, so screen readers meet one navigation landmark. Render both from the same data (a `json()` file and a loop) so they never drift apart. ## Keyboard | Key | Action | | --- | --- | | `Tab` | Moves through the triggers and links in page order, and into an open panel after its trigger. Leaving an item closes its panel. | | `Enter` `Space` | On a trigger, opens or closes its panel. On a link, follows it (`Enter`). | | `→` `←` | On the top level, moves to the next or previous trigger or link, wrapping round. | | `Home` `End` | Moves to the first or last top-level item; in a panel, to its first or last link. | | `↓` | On a trigger, opens its panel and moves to its first link. In a panel, moves to the next link. | | `↑` | In a panel, moves to the previous link, or from the first link back to the trigger. | | `Esc` | Closes the open panel and returns focus to its trigger. | In a vertical menu, `↓` and `↑` move through the top-level items and the links of an open panel as one list. ## Accessibility - The nav is a navigation landmark: give it an `aria-label`, and a different one to each navigation on the page. - Triggers are buttons with `aria-expanded` and `aria-controls`, so screen readers announce collapsed or expanded. Links stay links, read in order, and there are no menu roles to change how the keyboard works. - A closed panel is hidden with `visibility`, so it is out of the tab order and the accessibility tree, and can fade out as well as in. - Arrow keys are a shortcut on top of `Tab`, which reaches everything. - Hover-opened panels can be dismissed with `Esc` without moving the pointer, and wait for the pointer to cross into them (WCAG 1.4.13). - With reduced motion, panels fade without zooming and the chevron turns without animating. ## With htmx Boost the menu's links with `hx-boost:inherited="true"` on the nav, or on `` as this site does, so following one swaps the page without a full reload. The panel closes when one of its links is followed. If the response replaces the whole body, the server renders the new `aria-current`; if it swaps only the main content (`hx-target` and `hx-select`), also return the menu with `hx-swap-oob` so the current link moves. ```html ``` A panel fires `navigation-menu:open` and `navigation-menu:close` (they bubble) each time it opens and closes. Fill a panel from the server the first time it opens with `hx-trigger="navigation-menu:open once"`: ```html ``` ## Reference | Class / attribute | Description | | --- | --- | | `.navigation-menu` | The