Components / Navigation
Navigation & overlays
Live examples with keyboard behaviour, markup contracts and explicit state coverage. Cookie choices are saved locally for this demo only.
Tabs
Switch related views without navigation. Arrow keys wrap; Home and End select the first and last tab.
Website refresh
Three review items are ready for your team.
Latest activity
Jamie Davis approved the navigation update at 09:42 UTC.
Project settings
Use the project page to manage connections and access.
Markup & reuse: tabs
<div data-tabs>
<div role="tablist" aria-label="Project detail">
<button id="tab-a" role="tab" class="dd-filter"
aria-selected="true" aria-controls="panel-a">Overview</button>
</div>
<div id="panel-a" role="tabpanel" aria-labelledby="tab-a"
tabindex="0">Panel content</div>
</div>
Place each group inside a
data-navigation-example root. Import
src/theme/ts/component-navigation.ts once. Give
inactive tabs aria-selected="false" tabindex="-1" and
their panels hidden. Use unique IDs. Dynamic roots
can call the exported
initComponentNavigation(root) once after insertion.
Horizontal, automatically activated tabs only; disabled and
asynchronously loaded tabs are not implemented.
Disclosure
A native summary button reveals secondary information. Enter and Space toggle it; no controller is needed.
Review requirements
One maintainer must approve the change. Required checks must pass before merging.
<details>
<summary>Review requirements</summary>
<p>One maintainer must approve the change.</p>
</details>
Add open for the expanded initial state. Multiple
disclosures remain independent.
Dropdown navigation
Ordinary links in a disclosure, not an application menu. Tab moves through links; Escape closes and restores focus.
Project destinations
Markup & reuse: dropdown
<details data-navigation-dropdown>
<summary>Project destinations</summary>
<nav aria-label="Project destinations">
<a href="project.html">Project overview</a>
</nav>
</details>Use the same root and controller as tabs. Position the navigation relative to its disclosure. Inside clicks keep it open; leaving focus or clicking outside closes it. No arrow-key menu semantics or automatic viewport collision placement are claimed.
Dialog & drawer
Both use native modal dialogs: background content is inert, focus stays inside, and Escape or Close returns to the trigger. Clicking the backdrop does not dismiss these examples.
Markup & reuse: overlays
<button data-dialog-open="example-dialog">Open dialog</button>
<dialog id="example-dialog" aria-labelledby="example-title">
<h2 id="example-title">Review settings</h2>
<form method="dialog">
<button autofocus>Close</button>
</form>
</dialog>
Keep the trigger and dialog inside one
data-navigation-example root and a unique target ID.
Multiple triggers can open the same dialog; focus returns to the
actual opener. Import the controller once. The drawer only changes
positioning and height. These fixtures demonstrate presentation,
not saving. Nested overlays and long-form validation are outside
this example.