Nested 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 🔥

Destructure the machine's service returned from the useMachine hook.
Use the exposed setParent and setChild functions provided by the menu's connect function to assign the parent and child menus respectively.
Create trigger item's using the api.getTriggerItemProps(...) function.

When building nested menus, you'll need to use:

setParent(...) — Function to register a parent menu's machine in the child menu's context.
setChild(...) — Function to register a child menu's machine in the parent menu's context.

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

export function NestedMenu() {
  // Level 1 - File Menu
  const [fileMenuState, fileMenuSend, fileMenuMachine] = useMachine(
    menu.machine({ id: "1", "aria-label": "File" }),
  )

  const fileMenu = menu.connect(fileMenuState, fileMenuSend, normalizeProps)

  // Level 2 - Share Menu
  const [shareMenuState, shareMenuSend, shareMenuMachine] = useMachine(
    menu.machine({ id: "2", "aria-label": "Share" }),
  )

  const shareMenu = menu.connect(shareMenuState, shareMenuSend, normalizeProps)

  useEffect(() => {
    setTimeout(() => {
      fileMenu.setChild(shareMenuMachine)
      shareMenu.setParent(fileMenuMachine)
    })
  }, [])

  // Share menu trigger
  const shareMenuTriggerProps = fileMenu.getTriggerItemProps(shareMenu)

  return (
    <>
      <button {...fileMenu.triggerProps}>Click me</button>

      <Portal>
        <div {...fileMenu.positionerProps}>
          <ul {...fileMenu.contentProps}>
            <li {...fileMenu.getItemProps({ id: "new-tab" })}>New tab</li>
            <li {...fileMenu.getItemProps({ id: "new-win" })}>New window</li>
            <li {...shareMenuTriggerProps}>Share</li>
            <li {...fileMenu.getItemProps({ id: "print" })}>Print...</li>
            <li {...fileMenu.getItemProps({ id: "help" })}>Help</li>
          </ul>
        </div>
      </Portal>

      <Portal>
        <div {...shareMenu.positionerProps}>
          <ul {...shareMenu.contentProps}>
            <li {...shareMenu.getItemProps({ id: "messages" })}>Messages</li>
            <li {...shareMenu.getItemProps({ id: "airdrop" })}>Airdrop</li>
            <li {...shareMenu.getItemProps({ id: "whatsapp" })}>WhatsApp</li>
          </ul>
        </div>
      </Portal>
    </>
  )
}

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

export default function Page() {
  // Level 1 - File Menu
  const [fileMenuState, fileMenuSend, fileMenuMachine] = useMachine(
    menu.machine({ "aria-label": "File", id: createUniqueId() }),
  )

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

  // Level 2 - Share Menu
  const [shareMenuState, shareMenuSend, shareMenuMachine] = useMachine(
    menu.machine({ "aria-label": "Share", id: createUniqueId() }),
  )

  const shareMenu = createMemo(() =>
    menu.connect(subState, subSend, normalizeProps),
  )

  onMount(() => {
    setTimeout(() => {
      fileMenu().setChild(shareMenuMachine)
      shareMenu().setParent(fileMenuMachine)
    })
  })

  // Share menu trigger
  const shareMenuTriggerProps = createMemo(() =>
    fileMenu().getTriggerItemProps(shareMenu()),
  )

  return (
    <>
      <button {...fileMenu().triggerProps}>Click me</button>

      <Portal>
        <div {...fileMenu().positionerProps}>
          <ul {...fileMenu().contentProps}>
            <li {...fileMenu().getItemProps({ id: "new-tab" })}>New tab</li>
            <li {...fileMenu().getItemProps({ id: "new-win" })}>New window</li>
            <li {...shareMenuTriggerProps()}>Share</li>
            <li {...fileMenu().getItemProps({ id: "print" })}>Print...</li>
            <li {...fileMenu().getItemProps({ id: "help" })}>Help</li>
          </ul>
        </div>
      </Portal>

      <Portal>
        <div {...shareMenu().positionerProps}>
          <ul {...shareMenu().contentProps}>
            <li {...shareMenu().getItemProps({ id: "messages" })}>Messages</li>
            <li {...shareMenu().getItemProps({ id: "airdrop" })}>Airdrop</li>
            <li {...shareMenu().getItemProps({ id: "whatsapp" })}>WhatsApp</li>
          </ul>
        </div>
      </Portal>
    </>
  )
}

import * as menu from "@zag-js/menu"
import { normalizeProps, useMachine } from "@zag-js/vue"
import {
  computed,
  defineComponent,
  onMounted,
  Teleport,
  Fragment,
  h,
} from "vue"

export default defineComponent({
  name: "NestedMenu",
  setup() {
    // Level 1 - File Menu
    const [fileMenuState, fileMenuSend, fileMenuMachine] = useMachine(
      menu.machine({ id: "1", "aria-label": "File" }),
    )

    const fileMenuApi = computed(() =>
      menu.connect(fileMenuState.value, fileMenuSend, normalizeProps),
    )

    // Level 2 - Share Menu
    const [shareMenuState, shareMenuSend, shareMenuMachine] = useMachine(
      menu.machine({ "aria-label": "Share" }),
    )

    const shareMenuApi = computed(() =>
      menu.connect(shareMenuState.value, shareMenuSend, normalizeProps),
    )

    onMounted(() => {
      setTimeout(() => {
        fileMenu.value.setChild(shareMenuMachine)
        shareMenu.value.setParent(fileMenuMachine)
      })
    })

    // Share menu trigger
    const shareMenuTriggerProps = computed(() =>
      fileMenu.value.getTriggerItemProps(shareMenuApi.value)
    )

    return () => {
      const fileMenu = fileMenuApi.value
      const shareMenu = shareMenuApi.value
      return (
        <>
          <button {...fileMenu.triggerProps}>Click me</button>

          <Teleport to="body">
            <div {...fileMenu.positionerProps}>
              <ul {...fileMenu.contentProps}>
                <li {...fileMenu.getItemProps({ id: "new-tab" })}>New tab</li>
                <li {...fileMenu.getItemProps({ id: "new-win" })}>
                  New window
                </li>
                <li {...shareMenuTriggerProps.value}>Share</li>
                <li {...fileMenu.getItemProps({ id: "print" })}>Print...</li>
                <li {...fileMenu.getItemProps({ id: "help" })}>Help</li>
              </ul>
            </div>
          </Teleport>

          <Teleport to="body">
            <div {...shareMenu.positionerProps}>
              <ul {...shareMenu.contentProps}>
                <li {...shareMenu.getItemProps({ id: "messages" })}>
                  Messages
                </li>
                <li {...shareMenu.getItemProps({ id: "airdrop" })}>Airdrop</li>
                <li {...shareMenu.getItemProps({ id: "whatsapp" })}>
                  WhatsApp
                </li>
              </ul>
            </div>
          </Teleport>
        </>
      )
    }
  },
})

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

// Level 1 - File Menu
const [fileMenuState, fileMenuSend, fileMenuMachine] = useMachine(
  menu.machine({ id:"1", "aria-label": "File" })
);

const fileMenu = computed(() =>
  menu.connect(fileMenuState.value, fileMenuSend, normalizeProps)
);

// Level 2 - Share Menu
const [shareMenuState, shareMenuSend, shareMenuMachine] = useMachine(
  menu.machine({ id:"2", "aria-label": "Share" })
);

const shareMenu = computed(() => 
  menu.connect(shareMenuState.value, shareMenuSend, normalizeProps)
);

onMounted(() => {
  setTimeout(() => {
    fileMenu.value.setChild(shareMenuMachine);
    shareMenu.value.setParent(fileMenuMachine);
  });
});

// Share menu trigger
const shareMenuTriggerProps = computed(() => 
  fileMenu.value.getTriggerItemProps(shareMenu.value)
);

</script>

<template>
  <button v-bind="fileMenu.triggerProps">Click me</button>

  <Teleport to="body">
    <div v-bind="fileMenu.positionerProps">
      <ul ref="fileMenuRef" v-bind="fileMenu.contentProps">
        <li v-bind="fileMenu.getItemProps({ id: 'new-tab' })">New tab</li>
        <li v-bind="fileMenu.getItemProps({ id: 'new-win' })">New window</li>
        <li v-bind="shareMenuTriggerProps">Share</li>
        <li v-bind="fileMenu.getItemProps({ id: 'print' })">Print...</li>
        <li v-bind="fileMenu.getItemProps({ id: 'help' })">Help</li>
      </ul>
    </div>
  </Teleport>

  <Teleport to="body">
    <div v-bind="shareMenu.positionerProps">
      <ul ref="shareMenuRef" v-bind="shareMenu.contentProps">
        <li v-bind="shareMenu.getItemProps({ id: 'messages' })">Messages</li>
        <li v-bind="shareMenu.getItemProps({ id: 'airdrop' })">Airdrop</li>
        <li v-bind="shareMenu.getItemProps({ id: 'whatsapp' })">WhatsApp</li>
      </ul>
    </div>
  </Teleport>
</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.

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="option-item"][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="option-item"][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="option-item"][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; label(id: string): string; group(id: string): string; positioner: string; arrow: string; }>The ids of the elements in the menu. Useful for composition.

valueRecord<string, string | string[]>The values of radios and checkboxes in the menu.

onValueChange(details: ValueChangeDetails) => voidCallback to be called when the menu values change (for radios and checkboxes).

highlightedIdstringThe `id` of the active menu item.

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.

loopbooleanWhether 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

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:

isOpenbooleanWhether the menu is open

open() => voidFunction to open the menu

close() => voidFunction to close the menu

highlightedIdstringThe id of the currently highlighted menuitem

setHighlightedId(id: 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

valueRecord<string, string | string[]>The value of the menu options item

setValue(name: string, value: any) => voidFunction to set the value of the menu options item

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

Accessibility

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

Keyboard Interactions

Space
Opens/closes the nested menu.

Enter
Opens/closes the nested menu.

ArrowDown
Moves focus to the next item.

ArrowUp
Moves focus to the previous item.

ArrowRight
Opens the nested menu.

ArrowLeft
Closes the nested menu.

Esc
Closes the nested menu and moves focus to the parent menu item.

Edit this page on GitHub