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
Menubar
Designer doc
Menubar is slightly different from SideMenu even though they have similar role and other aria properties. While SideMenu is normally used solely for navigation, Menubar’s items can be used for checkboxes or radios.
If you’re using macOS, you can move your mouse to menubar on the top and explore all the items there - you might find some items with checkmark on the left of its label. That item can either be checkbox or radio. You can find more thorough explanation and example in WAI-ARIA Editor Menubar Example.
Example
Basic Usage
View code
Menu Group
View code
Variants
View code
Controlled MenubarGroupLabel
label prop can be used to display its selected MenubarGroupItem with some customization
View code
Routing Library Integrations
React Router DOM
react-router-dom will highlight matched routes with ‘aria-current=page’. This is an alternative to the selected prop which also help with accessibility.
The default activeAttribute is ‘aria-current=page’, which is used to find the active menubar item.
Below is an example with React Router’s MemoryRouter to sort of mock the URL instead of using the real one. So, don’t include MemoryRouter in your application, just use your normal BrowserRouter.
View code
you can also use customized active class name, just remember to pass it in the activeAttribute prop.
View code
@reach/router
reach/router does not highlight partially matched route with aria-current=page by default, you can add that by yourself for easier integration.
Similarly, you can ignore <LocationProvider/> part since it’s just for demonstration purposes.
View code
Alternatively, you may declare your own attribute to highlight matched route.
View code
Accessibility
This component’s aria attributes and keyboard interactions follow WAI-ARIA’s Menu bar design pattern.
Some keyboard interactions are:
- ArrowLeft and ArrowRight to navigate through items in Menubar.
- ArrowUp and ArrowDown to expand and focus sub item for MenubarGroup directly under Menubar.
- Escape to collapse current MenubarGroup.
- ArrowRight and ArrowLeft to expand and collapse nested MenubarGroup.
- ArrowRight and ArrowLeft at the edge will focus the next or previous item in Menubar.
References
- Navigation menubar Example: https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-navigation.html
- Editor Menubar: https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-editor.html
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/menu/
- Ant Design: https://ant.design/components/menu/#components-menu-demo-horizontal
- React Router NavLink: https://reacttraining.com/react-router/web/api/NavLink
- Reach Router Link: https://reach.tech/router/api/Link
API
Menubar
| Prop name | Type | Default | Description |
|---|---|---|---|
| activeAttribute | string | [aria-current='page'] | |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| navProps | NavProps | ||
| underline | ReactElement<any, string | JSXElementConstructor<any>> | ||
| variant | NavbarVariants |
MenubarGroup
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | animated.ul | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
| buttonProps | (MenubarItemProps | MenubarGroupItemProps) & { ref?: Ref<HTMLAnchorElement>; } | ||
| container | HTMLElement | configs.getPortalContainer('MenubarGroup', 'container') | |
| disableScrollLock | boolean | ||
| immediate | boolean | ||
| index | number | ||
| initialActive | boolean | ||
| label | ReactNode | ||
| labelArrow | ReactNode | ||
| offset | [number, number] | ||
| 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 } |
MenubarGroupItem
| 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. | |
| disabled | boolean | ||
| index | number | ||
| keyboardClickKeys | string[] | ['Enter', ' '] | |
| listItemProps | MenubarGroupItemListItemProps | ||
| selected | boolean |
MenubarItem
| 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. | |
| disabled | boolean | ||
| index | number | ||
| keyboardClickKeys | string[] | ['Enter', ' '] | |
| listItemProps | MenubarItemListItemProps | ||
| selected | boolean |
MenubarUnderline
| 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. | |
| basis | number | 3 | Height. |