Skip to content

Menu

Dropdown menu opened via button. Supports typeahead and keyboard navigation.

Note: This component renders content inside of a Drawer at small viewports.

Default

MenuButton extends the Button component.

Code Editor

Disabled Items

Code Editor

Link Items

MenuLink extends the Link component.

Code Editor

Custom Trigger

The trigger is still wrapped by an unstyled button.

Code Editor

Prefix and Suffix

Code Editor

No Arrow

Code Editor

The position will automatically adapt based on the window bounds.

Overflow

Specify a max height to automatically overflow items. When focusing an item via keyboard, it will be scrolled into view.

Code Editor

Rotate

Loop to beginning or end when reaching the bounds with keyboard selection.

Code Editor

Loose Variant

Less compact layout.

Code Editor

Divide

Automatically adds a border between MenuItems (including MenuLinks).

Code Editor

Example: Scope Switcher

Code Editor