<hui-navigation-menu label="Main">
  <a class="hui-nav-link" href="#home" aria-current="page">Home</a>
  <a class="hui-nav-link" href="#products" data-value="products">Products</a>
  <a class="hui-nav-link" href="#pricing">Pricing</a>
  <div data-panel data-for="products" style="padding:.75rem">Product links live here.</div>
</hui-navigation-menu>

The Go template that renders it:

<hui-navigation-menu label="Main">
  {{ range .Items }}
    <a class="hui-nav-link" href="{{ .Href }}"{{ if .Current }} aria-current="page"{{ end }}{{ if .Value }} data-value="{{ .Value }}"{{ end }}>{{ .Label }}</a>
  {{ end }}
  <div data-panel data-for="products">…</div>
</hui-navigation-menu>

On a phone

When its links do not fit on one row, the bar folds behind a single button (its text is menu-label) and the links stack in a dropdown under it; it unfolds once there is room for the row. An item with a panel opens it inline, under the item. At any width, a tap or Enter on an item with a panel opens the panel rather than following the link - with JavaScript off, the link still works.

Five links fold behind one button 375 px wide

Source

<hui-navigation-menu label="Main">
  <a class="hui-nav-link" href="#home" aria-current="page">Home</a>
  <a class="hui-nav-link" href="#components" data-value="components">Components</a>
  <a class="hui-nav-link" href="#docs">Documentation</a>
  <a class="hui-nav-link" href="#blocks">Blocks</a>
  <a class="hui-nav-link" href="#pricing">Pricing</a>
  <div data-panel data-for="components" style="padding:.5rem">
    <a class="hui-nav-link" href="#alert-dialog">Alert dialog</a>
    <a class="hui-nav-link" href="#hover-card">Hover card</a>
    <a class="hui-nav-link" href="#progress">Progress</a>
  </div>
</hui-navigation-menu>

API

Attributes6

Attributes
Name	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout and which arrows move.
`open`	`a <code>data-value</code>`	`""`	Which panel is open. Reflected, so a server may render one open.
`delay`	`number`	`150`	Hover intent in, in milliseconds.
`label`	`string`	`"Main"`	The accessible name of the `<nav>`.
`menu-label`	`string`	`"Menu"`	The text of the button the links fold behind when they do not fit on one row.
`data-collapsed`	`boolean`	`absent`	Set by the element, never the host, while the links are folded behind the button.

Properties3

Properties
Name	Type	Default	Description
`orientation`	`string`	`'horizontal'`	Reflects to `orientation`.
`open`	`string`	`''`	Reflects to `open`.
`delay`	`number`	`150`	Hover intent delay.

Events2

Events
Name	Description
`hui-open`	A panel opened. Detail: `{ value }`.
`hui-close`	A panel closed. Detail: `{ value }`.

Slots1

Slots
Name	Description
`(default)`	The links and their `[data-panel][data-for]` panels.

Classes1

Classes
Name	Description
`.hui-nav-link`	A link inside `hui-navigation-menu`. The current one carries the host’s `aria-current="page"`. `<a class="hui-nav-link" href="/entries" aria-current="page">Entries</a>`

::part() hooks3

::part() hooks
Name	Description
`list`	The `<nav>` wrapping the links; the dropdown when they are folded.
`toggle`	The button the links fold behind when they do not fit. Hidden otherwise.
`viewport`	The positioned region the panel appears in.

States

This element has no states beyond its default.

Server-side mechanics

The server owns the items, their hrefs, which is current (aria-current="page"), and the panel contents; it may render a panel open with open. The element is not form-associated and submits nothing. The open panel is viewer-owned and announced with hui-open/hui-close. A swap that removes the element while a panel is open closes it with the element, leaving nothing behind.

Accessibility

The list is a <nav> landmark with a name from label.
Every item is a real link, so it can be opened in a new tab and works with JavaScript disabled.
A panel-owning link carries aria-expanded; the current one carries the server’s aria-current="page".

Keyboard

Keyboard
Keys	Action
`Arrow Left/Right (or Up/Down)`	Moves focus between the top-level links.
`Enter`	Follows the link; on an item with a panel, opens the panel and moves focus to its first link.
`Escape`	Closes the open panel and returns focus to its link; then closes the folded menu and returns focus to its button.

Gotchas

Panels are light-DOM [data-panel][data-for] children, not a slot; the element shows, hides and positions them. They must sit inside the element.
Navigation is links, not buttons that navigate: the dropdown is an enhancement over links that already work.
A click or tap on an item that owns a panel opens the panel and does not navigate, as a Radix trigger is a button. Give the panel a link to the item’s own page if it has one. With JavaScript off the item is a plain link again.

Navigation menu

Overview

Example