This page is a reusable-component split from the source checklist row Nav overlay or rail. The source row remains authoritative.
- Job
- Primary destinations
- Requirement
- must specify
- States / rules
- Max count; current location
- Specified means
- Count + current treatment
- Hardest context
- 375 overlay
5 destinations
16-item CMS dump
Preview
Preview — not a published component API.
Usage
Job: Primary destinations.
Count + current treatment
When not to use
Do not use as a second competing primary navigation model unless the product's command-surface rules explicitly allow it.
Variants
The checklist row does not authorize this page to invent a final component API. Where the source rule names a variant, preserve it; otherwise keep the implemented variant set minimal and job-driven.
States & behavior
Max count; current location
Default, Hover, Focus, Active/Pressed, and Disabled apply to interactive controls. Error, Loading, Empty, and Success apply where the component takes or reports data.
Accessibility
- Use native semantics whenever they match the job.
- Keep keyboard focus visible and distinct from hover.
- Do not rely on color alone for state.
- Maintain touch-operable targets and no hover-only actions.
- For composite/overlay controls, document focus movement, Escape, and return focus as applicable.
Responsive behavior
At sm, use a full-height or appropriately sized overlay with 44×44 targets; preserve current location and a clear close path.
Theme comparison
The component job and interaction contract stay stable while product expression changes.
Tokens
Bind the implementation to semantic roles for surface, text, border, focus, spacing, shape, and motion as needed. Actual token names must come from the implemented Foundation; this demo deliberately does not mint package-level token names.
Code / Storybook
When this component exists in code, this section should link to its source and Storybook stories for executable states, Controls, viewport, accessibility checks, and interaction tests. The documentation page remains responsible for job, guidance, source contract, product decisions, themes, and Catalog lineage.