The Menu component is a structured, context-driven UI element used for navigation, actions, selection, and quick access to features. Menus are composed of reusable subcomponents, each responsible for specific parts of the layout and interaction design. A menu can include headers, items, separators, and button blocks, and can also be scrollable for long content lists.

Menu with Header

MenuHeader is a trigger component that opens the menu. It displays title, description, thumbnail, and optionally a close button when menu is open.

Basic Menu & Menu Items with Descriptions

Simple menu with menu items. Menu items can include descriptions to provide additional context about the action.

Basic Menu

Simple menu with menu items. Click the MenuHeader to open the menu.

Menu Items with Descriptions

Menu items can include descriptions to provide additional context about the action.

Menu with Chevron

MenuHeader can display a chevron icon that rotates when the menu opens or closes, providing visual feedback about the menu state.

Scrollable Menu & Menu with Button Block

For menus with many items, use the scrollable prop to enable vertical scrolling. Menu can include a button block at the bottom for confirmation actions.

Scrollable Menu

For menus with many items, use the scrollable prop to enable vertical scrolling.

Menu with Button Block

Menu can include a button block at the bottom for confirmation actions or final actions like Save/Cancel.

Menu Items with Right Icons & Menu with Sections

Menu items can have icons on the right side. Use MenuItemsSection to group related items together with separators.

Menu Items with Right Icons

Menu items can have icons on the right side, typically used for navigation indicators or additional actions.

Menu with Sections

Use MenuItemsSection to group related items together. Separators can be used between sections.

Menu Items with Checkboxes & Menu with Disabled Items

Menu items can include checkboxes for selection. Menu items can be disabled to indicate unavailable actions.

Menu Items with Checkboxes

Menu items can include checkboxes for selection. Use showCheckbox and checked props to control the checkbox state.

Menu with Disabled Items

Menu items can be disabled to indicate unavailable actions. Disabled items have opacity 20% and cursor-not-allowed.

Menu with Selected Item

Menu items can have a selected/active state. Use the selected prop to highlight the currently active item. Menu will not close automatically on selection - you can switch between items without closing the menu.

Menu with Custom Separators

MenuItemsSection supports custom separator placement. You can specify separatorAfter (array of indices) or separatorEvery (every N items).

Menu Item States

Menu items support different states: Default, Hovered, Selected, and Disabled. Each state has specific styling to provide visual feedback.
Default: No background, text color #0D161F
Hovered: Background #E9EBED (gray-200)
Selected: Background #F8F4FC (light purple)
Disabled: 20% opacity, not interactive

Default State

Selected State

Disabled State

Note: Hover state is automatically applied when hovering over menu items. Open any menu above and hover over items to see the hover state (gray background #E9EBED).

Menu Item States with Checkboxes

Menu items with checkboxes also support all states: Default, Hovered, Selected, and Disabled.

Default (Unchecked)

Selected (Checked)

Disabled

Note: Hover state is automatically applied when hovering over menu items. Open any menu above and hover over items to see the hover state.