Menu

Menus help users choose items from a list.

How to use it

Default

Display a list of menu items. Uses a default Garden Button internally.

Button

Configure a custom menu trigger.

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 text

Meta text can also be paired with Menu items for additional clarity.

Grouped items

Group items together if they are associated or to enable selection.

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 placement. Optional fallbackPlacements can be set for fine-tuned repositioning control.

Size

Can be default or compact in size. This reduces vertical padding on menu items.

Configuration

• Name9.5.3•View source•View on npm
• Installnpm install @zendeskgarden/react-dropdowns
• Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
• Importimport { Item, ItemGroup, Menu, Separator } from '@zendeskgarden/react-dropdowns'

API

The Menu component follows this structure:

<Menu>  <Item />  <Item />  <ItemGroup>    <Item />  </ItemGroup>  {/* etc. */}</Menu>

Use Array.map to iterate over items.

const ITEMS = [  { value: 'Sunflower' },  {    legend: 'More flowers',    items: [      { value: 'Violet' },      { value: 'Daisy' },    ]  }]
<Menu>  {ITEMS.map(item =>    item.items ? (      <ItemGroup key={item.legend} legend={item.legend}>        {item.items.map(groupItem => (          <Item key={groupItem.value} {...groupItem} />        ))}      </ItemGroup>    ) : (      <Item key={item.value} {...item} />    )  )}</Menu>

Match Item and ItemGroup prop signatures when using wrapper components.

const ItemComponent = forwardRef((props, ref) => (  <Item {...props} ref={ref} />))
const ItemGroupComponent = forwardRef((props, ref) => (  <ItemGroup {...props} ref={ref} />))
<Menu>  <ItemGroupComponent legend="Flowers">    <ItemComponent value="Violet" />    <ItemComponent value="Sunflower" />    <ItemComponent value="Daisy" />  </ItemGroupComponent></Menu>

Menu

Extends HTMLAttributes<HTMLUListElement>

A Menu manages placement, positioning and layout of its child Item components.

string | ((props: IButtonProps & { ref: RefObject<HTMLButtonElement>; }) => ReactNode)

((changes: { type: string; value?: string; isExpanded?: boolean; focusedValue?: string | null | undefined; selectedItems?: ISelectedItem[] | undefined; }) => void) | undefined

Item

Extends LiHTMLAttributes<HTMLLIElement>

Nest an Item within a Menu component. It requires a value prop.

Item.Meta

Extends HTMLAttributes<HTMLDivElement>

An ItemMeta provides additional information about a menu item. Nest it within an Item component.

ItemGroup

Extends LiHTMLAttributes<HTMLLIElement>

Provides a semantic grouping to its child Item components. Optionally configures its Items as selectable.

Separator

Extends LiHTMLAttributes<HTMLLIElement>

A semantic separator between Item components.