Nav Menu
Vertical navigation list with proximity-aware row activation.
When To Use
- Use Nav Menu when content needs to appear in context without forcing a full page transition.
- Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
- Review the examples below to compare trigger styles, content density, and dismissal expectations.
When Not To Use
- Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
- Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.
Accessibility Notes
- Move focus into the overlay when it opens and return focus to the trigger when it closes.
- Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
- Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.
Key Props / API
Props
items
Default
Vertical product navigation