Menu
Menus help users select a single item from a list of available options.
This Menu does not meet Web Content Accessibility Guidelines (WCAG) requirements. Use the new Menu instead.
- To let users see and choose one thing from a list of items
- To let users see and choose one thing from a list of parallel actions, use in combination with a Split button
- To help users navigate, use Anchors instead
- To move between views, use Tabs instead
How to use it
Default
Works in combination with a Trigger to display a list of menu items.
Arrow
An arrow can be added to the Menu to give the user a sense of what element is triggering it.
Danger
Use danger styling for Menu items that enable destructive action.
Disabled
Items within a Menu can be disabled to prevent a user from interacting with them.
Media items
Media elements add even more context to a Menu.
Meta
Meta text can also be paired with Menu items for additional clarity.
Nested
Menus can contain nested levels for additional categorization of menu items.
Placement
Menu placement can be oriented around a trigger element in different positions. The default
placement is bottom-start. This example demonstrates the top-start placement.
Size
Can be default or compact in size. This reduces vertical padding on menu items.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-dropdowns
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Dropdown, Menu, Separator, Trigger, AddItem, HeaderIcon, HeaderItem, Item, ItemMeta, MediaBody, MediaFigure, MediaItem, NextItem, PreviousItem } from '@zendeskgarden/react-dropdowns'
API
The Menu component follows this structure:
<Dropdown><Trigger /><Menu><Item /><Item />{/* etc. */}</Menu></Dropdown>
AddItem
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
isDanger | boolean | – | Applies danger styling |
value | any | – | Sets the value that is returned upon selection |
Dropdown
The Dropdown component provides state and accessibility to its consumers while enabling customization. It uses PopperJS for positioning.
Dropdown State: The Downshift library handles
keyboard and accessibility logic. Provide other customizations directly to Downshift via
downshiftProps. See the stateReducer pattern
for a common customization strategy example.
Server Side Rendering: Server side rendering might require specific Downshift settings. The dropdowns package re-exports Downshift’s resetIdCounter utility, resetting the internal counter which is used to generate unique IDs for Downshift.
| Prop name | Type | Default | Description |
|---|---|---|---|
downshiftProps | Record<string, any> | – | Passes customization props to the Downshift component |
highlightedIndex | number | – | Highlights an element at a selected index |
inputValue | string | – | Sets the value of the input element |
isOpen | boolean | – | Opens the dropdown |
onInputValueChange | – | Handles input value change Parameters inputValue Value of the input elementstateAndHelpers Downshift state and helpers | |
onSelect | – | Handles item selection Parameters selectedItem The selected itemstateAndHelpers Downshift state and helpers | |
onStateChange | – | Handles state change Parameters options Downshift internal state changesstateAndHelpers Downshift state and helpers | |
selectedItem | any | – | Identifies the currently selected item |
selectedItems | any[] | – | Identifies the currently selected items |
HeaderIcon
Extends HTMLAttributes<HTMLDivElement>
Nest a HeaderIcon within a HeaderItem component.
HeaderItem
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
hasIcon | boolean | – | Applies icon styling |
Item
Extends LiHTMLAttributes<HTMLLIElement>
Nest an Item within a Menu component. It requires a value prop, which is provided to the
onSelect callback.
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
isDanger | boolean | – | Applies danger styling |
value | any | – | Sets the value that is returned upon selection |
ItemMeta
Extends HTMLAttributes<HTMLSpanElement>
An ItemMeta provides additional information about a menu item. Nest it within an Item component.
MediaBody
Extends HTMLAttributes<HTMLDivElement>
Nest a MediaBody within an Item component.
MediaFigure
Extends HTMLAttributes<Element>
Nest a MediaFigure within an Item component.
MediaItem
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
isDanger | boolean | – | Applies danger styling |
value | any | – | Sets the value that is returned upon selection |
Menu
Extends HTMLAttributes<HTMLUListElement>
A Menu manages placement, positioning and layout of the child Item components.
| Prop name | Type | Default | Description |
|---|---|---|---|
appendToNode | HTMLElement | – | Appends the menu to the element provided |
eventsEnabled | boolean | true | Allows the menu to reposition during browser resize events |
hasArrow | boolean | – | Attaches an arrow that points towards the menu trigger |
isAnimated | boolean | true | Animates the menu |
isCompact | boolean | – | Applies compact styling |
maxHeight | string | '400px' | Sets the max-height of the menu |
placement | 'start' | 'end' | 'auto' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'end-top' | 'end-bottom' | 'start-top' | 'start-bottom' | 'bottom-start' | Adjusts the placement of the menu |
popperModifiers | Modifiers | – | Passes configuration options to the Popper instance |
zIndex | number | 1000 | Sets the z-index of the menu |
NextItem
Extends LiHTMLAttributes<HTMLLIElement>
The NextItem component displays the next icon to show the presence of a succeeding level. It enables
additional RTL-aware keyboard navigation in nested menus. The Dropdown component’s isOpen and onStateChange
props can be used to conditionally handle the open/close state based on selection.
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
isDanger | boolean | – | Applies danger styling |
value | any | – | Sets the value that is returned upon selection |
PreviousItem
Extends LiHTMLAttributes<HTMLLIElement>
The PreviousItem component displays the previous icon to show the presence of a preceding level. It enables
additional RTL-aware keyboard navigation in nested menus. The Dropdown component’s isOpen and onStateChange
props can be used to conditionally handle the open/close state based on selection.
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
isDanger | boolean | – | Applies danger styling |
value | any | – | Sets the value that is returned upon selection |
Separator
Extends LiHTMLAttributes<HTMLLIElement>
Trigger
Extends HTMLAttributes<HTMLElement>
A Trigger applies state and accessibility attributes to its children. Nest it within a Dropdown component.
| Prop name | Type | Default | Description |
|---|---|---|---|
refKey | string | 'ref' | Passes the ref callback to components with non-standard ref props (i.e. innerRef) |