README
title: 'Menu' slug: /components/menu/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/menu' typescript: ./src/Menu.tsx,./src/MenuItem/MenuItem.tsx,./src/MenuList/MenuList.tsx storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-menu--basic'
Menu is a component that offers a list of choices to the user, such as a set of actions or links. Menu uses Popover component as a base.
Import
import { Menu } from '@contentful/f36-components';
Examples
You can use following components to build a menu:
<Menu>
: The main wrapper that provides nested components with all the context and state.<Menu.Trigger>
The wrapper for the menu list trigger. Must be a direct child of<Menu>
.
NOTE: 🚨 Ensure that the component that you pass acceptsref
. Consider usingforwardRef
for functional components.<Menu.List>
: The wrapper for the menu items. Must be a direct child of<Menu>
.<Menu.Item>
The trigger that handles menu selection. Must be a direct child of<Menu.List>
.<Menu.Divider>
A visual separator for menu items.<Menu.SectionTitle>
A title that you can use in the menu list.<Menu.ListHeader>
The wrapper for one menu item that will be sticked to the top of the menu list.<Menu.Item>
must be provided as a child.<Menu.ListFooter>
The wrapper for one menu item that will be sticked to the bottom of the menu list.<Menu.Item>
must be provided as a child.<Menu.Submenu>
The wrapper for for submenu components. Structure of the children remains the same like in<Menu>
, except you should use<Menu.SubmenuTrigger>
instead of<Menu.Trigger>
.<Menu.SubmenuTrigger>
The wrapper for the submenu list trigger. Must be a direct child of<Menu.Submenu>
.
Basic usage
With simple Button as a trigger
With Menu.SectionTitle and Menu.Divider
Controlled Menu
By default the Menu component is uncontrolled. So when user clicks on the trigger, the menu opens/closes.
But you can control it by passing isOpen
prop and onClose
, onOpen
callbacks.
Controlled Menu with custom trigger onClick callback
In most cases, you will use the controlled approach.
But if you have to provide your own toggle menu logic on the trigger component, you can do this by providing onClick
callback on trigger component and omitting onOpen
callback on the Menu component.
With Menu list maximum height
With disabled items
With menu open by default
With sticky header and footer
With React Router links
With predefined focused menu item
With submenu
By default props like closeOnSelect
, closeOnBlur
, closeOnEsc
that you pass to Menu
will be shared to all submenus
but you can redefine them on any submenu by passing those props directly to that Submenu
.
Props (API reference)
Menu
Menu.Item
Menu.List
Content guidelines
- Use an interactive element such as
button
forMenu.Trigger
Accessibility
- When the menu is opened, focus is moved to the first menu item. If you set
autoFocus
tofalse
, it will not move the focus. - When the menu is closed, focus returned back to the trigger element.
- You can use arrow keys (
ArrowUp
andArrowDown
) to navigate through menu items. - When the menu is open, click on
Esc
key will close the popover. If you setcloseOnEsc
tofalse
, it will not close. - When the menu is open, click outside menu or blurring out will close the menu. If you set
closeOnBlur
tofalse
, it will not close. - All the necessary a11y attributes for
Menu.List
,Menu.Trigger
andMenu.Item
are provided.