Code

Implementation
Default Menu Props
Custom Trigger Props
TriggerReturnProps
Menu.Item Props

Common Examples

import { Menu } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Menu label="Click me!">
      <Menu.Item label="Item 1" />
      <Menu.Item label="Item 2" />
      <Menu.Item label="Item 3" />
    </Menu>
  );
}

The Menu and Menu.Item components can be used to compose basic dropdown menus.

Demo

Nesting menus in dropdowns

To create nested dropdown menus, simply add a Menu as a child of another Menu.

Demo

To use a custom trigger element, use the trigger prop of the Menu, and omit the label prop (and any other prop meant to be passed to the default Button trigger).

Demo

React Accessibility

When using a custom trigger, make sure that the trigger:

Can receive focus via keyboard when tabbing.
Opens the menu when the user presses enter.
Closes the menu and returns focus to the trigger when the user presses escape.

For more guidance on accessible menu interactions, see keyboard navigation and focus management best practices.

<Menu
  label="Click me!"
  open={false}
  disableAutoHeight={false}
  appearance="secondary"
  size="medium"
>
  <Menu.Item label="Item 1" />
  <Menu.Item label="Item 2" />
</Menu>

Use the trigger prop to determine what element should open the menu. If trigger is omitted, a Button is used as the trigger by default. In this case, all props available to the Button component can be used on the Menu. In addition, the following props are available:

label

string

Alternatively, aria-label or aria-labelledby can be used.

disableAutoHeight

boolean

This will stop the menu from automatically deciding which way to open based on the trigger’s location on the screen.

open

boolean

<Menu
  trigger={(props) => <CustomButton {...props}>Custom Trigger</CustomButton>}
  open={false}
  disableAutoHeight={false}
>
  <Menu.Item label="Item 1" />
  <Menu.Item label="Item 2" />
</Menu>

When using the trigger prop to render a custom trigger, the following props are available:

disableAutoHeight

boolean

This will stop the menu from automatically deciding which way to open based on the trigger’s location on the screen.

open

boolean

trigger

(TriggerReturnProps) => ReactElement

<Menu
  trigger={(props) => (
    <button
      {...props}
      aria-controls={props["aria-controls"]}
      aria-expanded={props["aria-expanded"]}
      aria-haspopup={props["aria-haspopup"]}
      onClick={props.onClick}
    >
      Custom Trigger
    </button>
  )}
>
  <Menu.Item label="Item 1" />
</Menu>

`TriggerReturnProps`

The following props are passed as an object parameter in the custom trigger callback function when using the trigger prop. The function should return a ReactElement which should have the TriggerReturnProps passed to (see Creating custom menu triggers).

aria-controls

string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

aria-expanded

boolean

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

data-focus-inside

boolean

data-open

boolean

string

onClick

() => void

onFocus

() => void

onKeyDown

() => void

onKeyUp

() => void

onMouseDown

() => void

onPointerDown

() => void

<Menu.Item
  label="Menu Item"
  disabled={false}
  icon={EditIcon}
  onClick={() => console.log("Clicked")}
/>

In addition to the props listed below, the Menu.Item component can accept any valid HTML button props.

label

ReactNode

required

disabled

boolean

default:"false"

icon

Svg

The SVGR library imports *.svg files as React components, so icon accepts a React component.

Anvil2 Web

Resources

Common Examples

Nesting menus in dropdowns

Creating custom menu triggers

React Accessibility

Default `Menu` Props

Custom Trigger `Menu` Props

`TriggerReturnProps`

`Menu.Item` Props

Anvil2 Web

Resources

​Common Examples

​Creating simple dropdown menus

​Nesting menus in dropdowns

​Creating custom menu triggers

​React Accessibility

​Default Menu Props

​Custom Trigger Menu Props

​TriggerReturnProps

​Menu.Item Props

Common Examples

Creating simple dropdown menus

Nesting menus in dropdowns

Creating custom menu triggers

React Accessibility

Default `Menu` Props

Custom Trigger `Menu` Props

`TriggerReturnProps`

`Menu.Item` Props