--- title: 'Menu' type: 'component' status: 'stable' slug: /components/menu/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/menu' typescript: ./src/Menu.tsx,./src/MenuItem/MenuItem.tsx,./src/MenuList/MenuList.tsx storybook: 'https://f36-storybook.contentful.com/?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. It needs to be provided with a trigger element, which can contain text, text with icon or icon only. ## Technical information Menu is based on the popover component and offers compound components to build flexible menus that can be nested. ### Compound components 1. `` The wrapper for the menu list trigger. Must be a direct child of ``. NOTE: 🚨 Ensure that the component that you pass accepts `ref`. Consider using `forwardRef` for functional components. 1. ``: The wrapper for the menu items. Must be a direct child of ``. 1. `` The trigger that handles menu selection. Must be a direct child of ``. 1. `` A visual separator for menu items. 1. `` A title that you can use in the menu list. 1. `` The wrapper for one menu item that will be sticked to the top of the menu list. `` must be provided as a child. 1. `` The wrapper for one menu item that will be sticked to the bottom of the menu list. `` must be provided as a child. 1. _deprecated_ `` The wrapper for for submenu components. Structure of the children remains the same like in ``, except you should use `` instead of ``. 1. `` The wrapper for the submenu list trigger. Must be a direct child of ``. ## Import ```jsx static=true import { Menu } from '@contentful/f36-components'; ``` ## Examples ### Basic usage ```tsx file=examples/BasicMenu.tsx ``` ### With simple Button as a trigger ```tsx file=examples/MenuWithButtonAsTrigger.tsx ``` ### With Menu.SectionTitle and Menu.Divider ```jsx file=examples/MenuWithTitle.tsx ``` ### 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. ```jsx file=examples/ControlledMenu.tsx ``` ### Controlled Menu with custom trigger onClick callback In most cases, you will use the [controlled approach](#controlled-menu). 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. ```jsx file=examples/ControlledMenuWithCustomTriggerLogic.tsx ``` ### With Menu list maximum height ```jsx file=examples/MenuWithMaxHeight.tsx ``` ### With active and disabled items ```jsx file=examples/MenuWithActiveAndDisabledItems.tsx ``` ### With icons on menu items ```jsx file=examples/MenuWithIcons.tsx ``` ### With menu open by default ```jsx static=true file=examples/MenuOpenByDefault.tsx ``` ### With sticky header and footer ```jsx file=examples/MenuWithStickyHeaderFooter.tsx ``` ### With React Router links ```jsx static=true file=examples/MenuWithReactRouterLinks.tsx ``` ### With predefined focused menu item ```jsx file=examples/MenuWithPredefinedFocusedMenuItem.tsx ``` ### With nested 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`. ```jsx file=examples/MenuWithSubmenu.tsx ``` ## Props (API reference) ### Menu ### Menu.Item ### Menu.List ## Content guidelines - Use an interactive element such as `button` for `Menu.Trigger` ## Accessibility - When the menu is opened, focus is moved to the first menu item. Or to the one that has `isInitiallyFocused` prop set to `true`. - When the menu is closed, focus returned back to the trigger element. - You can use arrow keys (`ArrowUp` and `ArrowDown`) to navigate through menu items. - When the menu is open, click on `Esc` key will close the popover. If you set `closeOnEsc` to `false`, it will not close. - When the menu is open, click outside menu or blurring out will close the menu. If you set `closeOnBlur` to `false`, it will not close. - All the necessary a11y attributes for `Menu.List`, `Menu.Trigger` and `Menu.Item` are provided.