Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Menu
Designer doc
Note that Menu is different from Select. Menu mainly contains set of actions and doesn’t hold any value (except for menu item checkbox and radio). On the other hand, Select mainly focuses on the value that it holds.
Example
Basic Usage
View code
You can also use IconButton as menu button. Below also shows how you can create menu link for an item.
View code
MenuItem Colors
You can specify either color or colorType prop to customize the color of MenuItem.
View code
Submenu
You can render nested menu using SubMenu component. You can use ArrowRight or Enter to expand it; and ArrowLeft or Escape to collapse. Below is an example of Adobe Illustrator’s Effect menu.
View code
You can customize SubMenu styles to be more compact and reduce the animation. Below example also demonstrates how you can SubMenu that only opens when it is clicked.
View code
Accessibility
Aria attributes follow WAI-ARIA Menu and Menu Button Authoring Practice.
Menu can be opened using ArrowDown and ArrowUp keys. They respectively auto focus on first and last item. Each item are navigatable through ArrowDown and ArrowUp keys. Pressing Escape will close the menu.
For SubMenu, additional handler ArrowRight and ArrowLeft are added to open and close the submenu.
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
- Reach-UI: https://reacttraining.com/reach-ui/menu-button/
- Angular Material: https://material.angular.io/components/menu/overview
- Material-UI: https://material-ui.com/components/menus/
- Ant Design: https://ant.design/components/dropdown/
API
Menu
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| button | ReactElement<BaseButtonProps, any> | ||
| container | HTMLElement | configs.getPortalContainer('Menu', 'container') | |
| immediate | boolean | ||
| initialActive | boolean | ||
| offset | [number, number] | [0, 1] | |
| onActiveChange | (active: boolean) => void | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | ||
| popperOptions | PopperPopperOptions | Options for Popper.js instance | |
| popperUpdateKey | string | ||
| springConfig | Partial<AnimationConfig> | { tension: 720, mass: 0.5 } |
MenuArrow
| Prop name | Type | Default | Description |
|---|---|---|---|
| color | string | ||
| colorType | ColorTypes | ||
| secondaryColor | string | ||
| secondaryColorType | ColorTypes | ||
| size | string | number | 16 |
MenuItem
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| closeOnClick | boolean | true | |
| colorType | ColorTypes | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| index | number | ||
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> |
SubMenu
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| buttonProps | MenuItemProps & { ref?: Ref<HTMLDivElement>; } | ||
| container | HTMLElement | configs.getPortalContainer('SubMenu', 'container') | |
| disableScrollLock | boolean | ||
| immediate | boolean | ||
| index | number | ||
| initialActive | boolean | ||
| label | ReactNode | ||
| offset | [number, number] | [-1, 0] | |
| onActiveChange | (active: boolean) => void | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | right-start | |
| popperOptions | PopperPopperOptions | Options for Popper.js instance | |
| popperUpdateKey | string | ||
| springConfig | Partial<AnimationConfig> | { tension: 720, mass: 0.5 } |