Menu

An accessible dropdown and context menu that is used to display a list of actions or options that a user can choose.

Features

Support for items, labels, groups of items.
Focus is fully managed using aria-activedescendant pattern.
Typeahead to allow focusing items by typing text.
Keyboard navigation support including arrow keys, home/end, page up/down.

Installation

To use the menu machine in your project, run the following command in your command line:

This command will install the framework agnostic menu logic and the reactive utilities for your framework of choice.

Anatomy

To set up the menu correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Usage

First, import the menu package into your project

import * as menu from "@zag-js/menu"

The menu package exports two key functions:

machine — The state machine logic for the menu widget.
connect — The function that translates the machine's state to JSX attributes and event handlers.

You'll need to provide a unique id to the useMachine hook. This is used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the menu machine in your project 🔥

import * as menu from "@zag-js/menu"
import { useMachine, normalizeProps } from "@zag-js/react"
import { useId } from "react"

export function Menu() {
  const [state, send] = useMachine(menu.machine({ id: useId() }))

  const api = menu.connect(state, send, normalizeProps)

  return (
    <div>
      <button {...api.getTriggerProps()}>
        Actions <span {...api.getIndicatorProps()}>▾</span>
      </button>
      <div {...api.getPositionerProps()}>
        <ul {...api.getContentProps()}>
          <li {...api.getItemProps({ value: "edit" })}>Edit</li>
          <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
          <li {...api.getItemProps({ value: "delete" })}>Delete</li>
          <li {...api.getItemProps({ value: "export" })}>Export...</li>
        </ul>
      </div>
    </div>
  )
}

import * as menu from "@zag-js/menu"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function Menu() {
  const [state, send] = useMachine(menu.machine({ id: createUniqueId() }))

  const api = createMemo(() => menu.connect(state, send, normalizeProps))

  return (
    <div>
      <button {...api().getTriggerProps()}>
        Actions <span {...api().getIndicatorProps()}>▾</span>
      </button>
      <div {...api().getPositionerProps()}>
        <ul {...api().getContentProps()}>
          <li {...api().getItemProps({ value: "edit" })}>Edit</li>
          <li {...api().getItemProps({ value: "duplicate" })}>Duplicate</li>
          <li {...api().getItemProps({ value: "delete" })}>Delete</li>
          <li {...api().getItemProps({ value: "export" })}>Export...</li>
        </ul>
      </div>
    </div>
  )
}

<script setup>
import * as menu from "@zag-js/menu";
import { normalizeProps, useMachine } from "@zag-js/vue";
import { computed } from "vue";

const [state, send] = useMachine(menu.machine({ id: "1", "aria-label": "File" }));
const api = computed(() => menu.connect(state.value, send, normalizeProps));
</script>

<template>
  <div ref="ref">
    <button v-bind="api.getTriggerProps()">
        Actions <span v-bind="api.getIndicatorProps()">▾</span>
    </button>
    <div v-bind="api.getPositionerProps()">
      <ul v-bind="api.getContentProps()">
        <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>
        <li v-bind="api.getItemProps({ value: 'duplicate' })">Duplicate</li>
        <li v-bind="api.getItemProps({ value: 'delete' })">Delete</li>
        <li v-bind="api.getItemProps({ value: 'export' })">Export...</li>
      </ul>
    </div>
  </div>
</template>

Listening for item selection

When a menu item is clicked, the onSelect callback is invoked.

const [state, send] = useMachine(
  menu.machine({
    onSelect(details) {
      // details => { value: string }
      console.log("selected value is ", details.value)
    },
  }),
)

Listening for open state changes

When a menu is opened or closed, the onOpenChange callback is invoked.

const [state, send] = useMachine(
  menu.machine({
    onOpenChange(details) {
      // details => { open: boolean }
      console.log("open state is ", details.open)
    },
  }),
)

When the number of menu items gets much, it might be useful to group related menu items. To achieve this:

Wrap the menu items within an element.
Spread the api.getGroupProps(...) JSX properties unto the element, providing an id.
Render a label for the menu group, providing the id of the group element.

//...
<div {...api.getContentProps()}>
  {/* ... */}
  <hr {...api.getSeparatorProps()} />
  <p {...api.getLabelProps({ htmlFor: "account" })}>Accounts</p>
  <div {...api.getGroupProps({ id: "account" })}>
    <button {...api.getItemProps({ id: "account-1" })}>Account 1</button>
    <button {...api.getItemProps({ id: "account-2" })}>Account 2</button>
  </div>
</div>
//...

Checkbox and Radio option items

To use checkbox or radio option items, you'll need to:

Add a value property to the machine's context whose value is an object describing the state of the option items.
Use the api.getOptionItemProps(...) function to get the props for the option item.

A common requirement for the option item that you pass the name, value and type properties.

type — The type of option item. Either "checkbox" or "radio".
value — The value of the option item.
checked — The checked state of the option item.
onCheckedChange — The callback to invoke when the checked state changes.

import * as menu from "@zag-js/menu"
import { useMachine, normalizeProps } from "@zag-js/react"

const data = {
  order: [
    { label: "Ascending", value: "asc" },
    { label: "Descending", value: "desc" },
    { label: "None", value: "none" },
  ],
  type: [
    { label: "Email", value: "email" },
    { label: "Phone", value: "phone" },
    { label: "Address", value: "address" },
  ],
}

export function Menu() {
  const [order, setOrder] = useState("")
  const [type, setType] = useState([])

  const [state, send] = useMachine(menu.machine({ id: "1" }))

  const api = menu.connect(state, send, normalizeProps)

  const radios = menuOptionData.order.map((item) => ({
    type: "radio",
    name: "order",
    value: item.value,
    label: item.label,
    checked: order === item.value,
    onCheckedChange: (checked) => setOrder(checked ? item.value : ""),
  }))

  const checkboxes = menuOptionData.type.map((item) => ({
    type: "checkbox",
    name: "type",
    value: item.value,
    label: item.label,
    checked: type.includes(item.value),
    onCheckedChange: (checked) =>
      setType((prev) =>
        checked ? [...prev, item.value] : prev.filter((x) => x !== item.value),
      ),
  }))

  return (
    <>
      <button {...api.getTriggerProps()}>Trigger</button>
      <div {...api.getPositionerProps()}>
        <div {...api.getContentProps()}>
          {radios.map((item) => {
            return (
              <div key={item.value} {...api.getOptionItemProps(item)}>
                <span {...api.getItemIndicatorProps(item)}>✅</span>
                <span {...api.getItemTextProps(item)}>{item.label}</span>
              </div>
            )
          })}
          <hr {...api.getSeparatorProps()} />
          {checkboxes.map((item) => {
            return (
              <div key={item.value} {...api.getOptionItemProps(item)}>
                <span {...api.getItemIndicatorProps(item)}>✅</span>
                <span {...api.getItemTextProps(item)}>{item.label}</span>
              </div>
            )
          })}
        </div>
      </div>
    </>
  )
}

import * as menu from "@zag-js/menu"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId, For } from "solid-js"

export function Menu() {
  const [state, send] = useMachine(menu.machine({ id: createUniqueId() }))

  const api = createMemo(() => menu.connect(state, send, normalizeProps))

  const [order, setOrder] = createSignal("")
  const [type, setType] = createSignal([])

  const radios = createMemo(() =>
    menuOptionData.order.map((item) => ({
      type: "radio",
      value: item.value,
      label: item.label,
      checked: order() === item.value,
      onCheckedChange: (checked: boolean) =>
        setOrder(checked ? item.value : ""),
    })),
  )

  const checkboxes = createMemo(() =>
    menuOptionData.type.map((item) => ({
      type: "checkbox",
      value: item.value,
      label: item.label,
      checked: type().includes(item.value),
      onCheckedChange: (checked: boolean) =>
        setType((prev) =>
          checked
            ? [...prev, item.value]
            : prev.filter((x) => x !== item.value),
        ),
    })),
  )

  return (
    <>
      <button {...api().getTriggerProps()}>Trigger</button>
      <div {...api().getPositionerProps()}>
        <div {...api().getContentProps()}>
          <For each={radios()}>
            {(item) => (
              <div {...api().getOptionItemProps(item)}>
                <span {...api().getItemIndicatorProps(item)}>✅</span>
                <span {...api().getItemTextProps(item)}>
                  {item.label}
                </span>
              </div>
            )}
          </For>
          <hr {...api().getSeparatorProps()} />
          <For each={checkboxes()}>
            {(item) => (
              <div {...api().getOptionItemProps(item)}>
                <span {...api().getItemIndicatorProps(item)}>✅</span>
                <span {...api().getItemTextProps(item)}>
                  {item.label}
                </span>
              </div>
            )}
          </For>
        </div>
      </div>
    </>
  )
}

<script setup>
  import * as menu from "@zag-js/menu"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"
  import { data } from "./data"

  const [state, send] = useMachine(menu.machine({ id: "1" }))

  const api = computed(() => menu.connect(state.value, send, normalizeProps))

  const radios = computed(() =>
    menuOptionData.order.map((item) => ({
      label: item.label,
      id: item.value,
      type: "radio",
      value: item.value,
      checked: item.value === orderRef.value,
      onCheckedChange(v) {
        orderRef.value = v ? item.value : ""
      },
    })),
  )

  const checkboxes = computed(() =>
    menuOptionData.type.map((item) => ({
      id: item.value,
      label: item.label,
      type: "checkbox",
      value: item.value,
      checked: typeRef.value.includes(item.value),
      onCheckedChange(v) {
        typeRef.value = v
          ? [...typeRef.value, item.value]
          : typeRef.value.filter((x) => x !== item.value)
      },
    })),
  )
</script>

<template>
  <button ref="ref" v-bind="api.getTriggerProps()">Trigger</button>
  <div v-bind="api.getPositionerProps()">
    <div v-bind="api.getContentProps()">
      <div
        v-for="item in radios"
        :key="item.value"
        v-bind="api.getOptionItemProps(item)"
      >
        <span v-bind="api.getItemIndicatorProps(item)">✅</span>
        <span v-bind="api.getItemTextProps(item)">{{ item.label }}</span>
      </div>
      <hr v-bind="api.getSeparatorProps()" />
      <div
        v-for="item in checkboxes"
        :key="item.value"
        v-bind="api.getOptionItemProps(item)"
      >
        <span v-bind="api.getItemIndicatorProps(item)">✅</span>
        <span v-bind="api.getItemTextProps(item)">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

Styling guide

Earlier, we mentioned that each menu part has a data-part attribute added to them to select and style them in the DOM.

Open and closed state

When the menu is open or closed, the content and trigger parts will have the data-state attribute.

[data-part="content"][data-state="open|closed"] {
  /* styles for open or closed state */
}

[data-part="trigger"][data-state="open|closed"] {
  /* styles for open or closed state */
}

Highlighted item state

When an item is highlighted, via keyboard navigation or pointer, it is given a data-highlighted attribute.

[data-part="item"][data-highlighted] {
  /* styles for highlighted state */
}

[data-part="item"][data-type="radio|checkbox"][data-highlighted] {
  /* styles for highlighted state */
}

Disabled item state

When an item or an option item is disabled, it is given a data-disabled attribute.

[data-part="item"][data-disabled] {
  /* styles for disabled state */
}

[data-part="item"][data-type="radio|checkbox"][data-disabled] {
  /* styles for disabled state */
}

Using arrows

When using arrows within the menu, you can style it using css variables.

[data-part="arrow"] {
  --arrow-size: 20px;
  --arrow-background: red;
}

Checked option item state

When an option item is checked, it is given a data-state attribute.

[data-part="item"][data-type="radio|checkbox"][data-state="checked"] {
  /* styles for checked state */
}

Methods and Properties

Machine Context

The menu machine exposes the following context properties:

idsPartial<{ trigger: string; contextTrigger: string; content: string; groupLabel(id: string): string; group(id: string): string; positioner: string; arrow: string; }>The ids of the elements in the menu. Useful for composition.

highlightedValuestringThe value of the highlighted menu item.

onHighlightChange(details: HighlightChangeDetails) => voidFunction called when the highlighted menu item changes.

onSelect(details: SelectionDetails) => voidFunction called when a menu item is selected.

anchorPointPointThe positioning point for the menu. Can be set by the context menu trigger or the button trigger.

loopFocusbooleanWhether to loop the keyboard navigation.

positioningPositioningOptionsThe options used to dynamically position the menu

closeOnSelectbooleanWhether to close the menu when an option is selected

aria-labelstringThe accessibility label for the menu

openbooleanWhether the menu is open

onOpenChange(details: OpenChangeDetails) => voidFunction called when the menu opens or closes

open.controlledbooleanWhether the menu's open state is controlled by the user

typeaheadbooleanWhether the pressing printable characters should trigger typeahead navigation

compositebooleanWhether the menu is a composed with other composite widgets like a combobox or tabs

dir"ltr" | "rtl"The document's text/writing direction.

idstringThe unique identifier of the machine.

getRootNode() => ShadowRoot | Node | DocumentA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

onEscapeKeyDown(event: KeyboardEvent) => voidFunction called when the escape key is pressed

onPointerDownOutside(event: PointerDownOutsideEvent) => voidFunction called when the pointer is pressed down outside the component

onFocusOutside(event: FocusOutsideEvent) => voidFunction called when the focus is moved outside the component

onInteractOutside(event: InteractOutsideEvent) => voidFunction called when an interaction happens outside the component

Machine API

The menu api exposes the following methods:

openbooleanWhether the menu is open

setOpen(open: boolean) => voidFunction to open or close the menu

highlightedValuestringThe id of the currently highlighted menuitem

setHighlightedValue(value: string) => voidFunction to set the highlighted menuitem

setParent(parent: Service) => voidFunction to register a parent menu. This is used for submenus

setChild(child: Service) => voidFunction to register a child menu. This is used for submenus

reposition(options?: Partial<PositioningOptions>) => voidFunction to reposition the popover

getOptionItemState(props: OptionItemProps) => OptionItemStateReturns the state of the option item

getItemState(props: ItemProps) => ItemStateReturns the state of the menu item

Data Attributes

Trigger

data-scope

data-part

trigger

data-placement

The placement of the trigger

data-state

"open" | "closed"

Indicator

data-scope

data-part

indicator

data-state

"open" | "closed"

Content

data-scope

data-part

content

data-state

"open" | "closed"

data-placement

The placement of the content

Item

data-scope

data-part

item

data-disabled

Present when disabled

data-highlighted

Present when highlighted

data-valuetext

The human-readable value

OptionItem

data-scope

data-part

option-item

data-type

The type of the item

data-state

"checked" | "unchecked"

data-disabled

Present when disabled

data-highlighted

Present when highlighted

data-valuetext

The human-readable value

ItemIndicator

data-scope

data-part

item-indicator

data-disabled

Present when disabled

data-highlighted

Present when highlighted

data-state

"checked" | "unchecked"

ItemText

data-scope

data-part

item-text

data-disabled

Present when disabled

data-highlighted

Present when highlighted

data-state

"checked" | "unchecked"

Accessibility

Uses aria-activedescendant pattern to manage focus movement among menu items.

Keyboard Interactions

Space
Activates/Selects the highlighted item

Enter
Activates/Selects the highlighted item

ArrowDown
Highlights the next item in the menu

ArrowUp
Highlights the previous item in the menu

ArrowRightArrowLeft
When focus is on trigger, opens or closes the submenu depending on reading direction.

Esc
Closes the menu and moves focus to the trigger

Edit this page on GitHub

Installation

Anatomy

Usage

Listening for item selection

Listening for open state changes

Grouping menu items

Checkbox and Radio option items

Styling guide

Open and closed state

Highlighted item state

Disabled item state

Using arrows

Checked option item state

Methods and Properties

Machine Context

Machine API

Data Attributes

Accessibility

Keyboard Interactions

On this page