Menu
The Menu component provides a vertical navigation structure for sidebars and panels. It organizes links and actions into logical groups, helping users navigate through the application efficiently.
tsx
Variants
Default uses base text colors, accent uses brand color for label and icon.
With Icon
Pass an icon to the leading slot. Icons are sized to 24×24 and use contextual colors.
Active
Highlights the current page or selection with a subtle background and border.
Disabled
Prevents interaction. Text and icons are muted.
Shortcut
Displays a keyboard shortcut badge on the trailing side.
Badge
Shows a pill indicator for unread counts or status.
Dot
A trailing dot indicator for status or attention signals.
Grouped
Full navigation panel with grouped sections, labels, and dividers.