Menu
Menus help users select a single item from a list of available options.
- 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.
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.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-dropdowns
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { AddItem, Dropdown, HeaderIcon, HeaderItem, Item, ItemMeta, MediaBody, MediaFigure, MediaItem, Menu, NextItem, PreviousItem, Separator, Trigger } from '@zendeskgarden/react-dropdowns'
API
AddItem
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
value | any | – | Sets the value that is returned upon selection |
Dropdown
| Prop name | Type | Default | Description |
|---|---|---|---|
downshiftProps | object | – | 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>
HeaderItem
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
hasIcon | boolean | – | Applies icon styling |
Item
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
value | any | – | Sets the value that is returned upon selection |
ItemMeta
Extends HTMLAttributes<HTMLSpanElement>
MediaBody
Extends HTMLAttributes<HTMLDivElement>
MediaFigure
Extends HTMLAttributes<any>
MediaItem
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
value | any | – | Sets the value that is returned upon selection |
Menu
Extends HTMLAttributes<HTMLUListElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
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 | GARDEN_PLACEMENT | 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>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
value | any | – | Sets the value that is returned upon selection |
PreviousItem
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
value | any | – | Sets the value that is returned upon selection |
Separator
Extends LiHTMLAttributes<HTMLLIElement>
Trigger
Extends HTMLAttributes<HTMLElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
refKey | string | 'ref' | Passes the ref callback to components with non-standard ref props (i.e. innerRef) |