MenusReact

import { Menu } from '@hamur/react/menu'

export default function MenuExample() {
  return (
    <Menu.Root>
      <Menu.Trigger className="button">
        Open menu
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner sideOffset={6}>
          <Menu.Popup className="menu">
            <Menu.Item className="menu-item">
              Rename
            </Menu.Item>
            <Menu.Item className="menu-item">
              Duplicate
            </Menu.Item>
            <Menu.CheckboxItem className="menu-item" defaultChecked>
              Show grid
            </Menu.CheckboxItem>
            <Menu.SubmenuRoot>
              <Menu.SubmenuTrigger className="menu-item">
                Share
              </Menu.SubmenuTrigger>
              <Menu.Portal>
                <Menu.Positioner>
                  <Menu.Popup className="menu">
                    <Menu.Item className="menu-item">
                      Copy link
                    </Menu.Item>
                    <Menu.Item className="menu-item">
                      Email
                    </Menu.Item>
                  </Menu.Popup>
                </Menu.Positioner>
              </Menu.Portal>
            </Menu.SubmenuRoot>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  )
}

2,516Tests passing in React · 0 failing

76.3 KiBSize

4.90 msOpen

18.0 msClose

29.0 msOpenMutations

27.0 msCloseMutations

1.35 MiBMemory

productdevbook and 37 upstream authors57 commits · last Nov 4

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<Menu.Root>
  <Menu.Trigger />
  <Menu.Portal>
    <Menu.Positioner>
      <Menu.Popup>
        <Menu.Item />
        <Menu.CheckboxItem />
        <Menu.SubmenuRoot>
          <Menu.SubmenuTrigger />
        </Menu.SubmenuRoot>
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu.Root>

// Not in this example: Menu.Arrow, Menu.Backdrop, Menu.CheckboxItemIndicator, Menu.Clear, Menu.Empty, Menu.FilterProvider, Menu.Group, Menu.GroupLabel, Menu.Input, Menu.LinkItem, Menu.List, Menu.RadioGroup, Menu.RadioItem, Menu.RadioItemIndicator, Menu.Separator, Menu.Viewport

Examples

openOnHover and delay open the menu when the pointer rests on the trigger.

MenuOpenOnHover.tsx

import { Menu } from '@hamur/react/menu'

export default function MenuOpenOnHoverExample() {
  return (
    <Menu.Root>
      <Menu.Trigger openOnHover className="button">
        Add to playlist <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner sideOffset={8} align="start">
          <Menu.Popup className="menu">
            <Menu.Item className="menu-item">Get Up!</Menu.Item>
            <Menu.Item className="menu-item">Inside Out</Menu.Item>
            <Menu.Item className="menu-item">Night Beats</Menu.Item>
            <Menu.Separator className="menu-separator" />
            <Menu.Item className="menu-item">New playlist…</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  )
}

function CaretDownIcon() {
  return (
    <svg className="caret" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M12 6H4l4 4.5z" />
    </svg>
  )
}

CheckboxItem toggles a setting on or off.

MenuCheckboxItems.tsx

import { useState } from 'react'
import { Menu } from '@hamur/react/menu'

export default function MenuCheckboxItemsExample() {
  const [showMinimap, setShowMinimap] = useState(true)
  const [showSearch, setShowSearch] = useState(true)
  const [showSidebar, setShowSidebar] = useState(false)

  return (
    <Menu.Root>
      <Menu.Trigger className="button">
        Workspace <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner sideOffset={8} align="start">
          <Menu.Popup className="menu">
            <Menu.CheckboxItem
              className="menu-choice"
              checked={showMinimap}
              onCheckedChange={setShowMinimap}
            >
              <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                <CheckIcon />
              </Menu.CheckboxItemIndicator>
              <span className="menu-choice-text">Minimap</span>
            </Menu.CheckboxItem>
            <Menu.CheckboxItem
              className="menu-choice"
              checked={showSearch}
              onCheckedChange={setShowSearch}
            >
              <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                <CheckIcon />
              </Menu.CheckboxItemIndicator>
              <span className="menu-choice-text">Search</span>
            </Menu.CheckboxItem>
            <Menu.CheckboxItem
              className="menu-choice"
              checked={showSidebar}
              onCheckedChange={setShowSidebar}
            >
              <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                <CheckIcon />
              </Menu.CheckboxItemIndicator>
              <span className="menu-choice-text">Sidebar</span>
            </Menu.CheckboxItem>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  )
}

function CaretDownIcon() {
  return (
    <svg className="caret" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M12 6H4l4 4.5z" />
    </svg>
  )
}

function CheckIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  )
}

RadioGroup and RadioItem pick one option of a set.

MenuRadioItems.tsx

import { useState } from 'react'
import { Menu } from '@hamur/react/menu'

export default function MenuRadioItemsExample() {
  const [value, setValue] = useState('date')
  return (
    <Menu.Root>
      <Menu.Trigger className="button">
        Sort <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner sideOffset={8} align="start">
          <Menu.Popup className="menu">
            <Menu.RadioGroup value={value} onValueChange={setValue}>
              <Menu.RadioItem className="menu-choice" value="date">
                <Menu.RadioItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span className="menu-choice-text">Date</span>
              </Menu.RadioItem>
              <Menu.RadioItem className="menu-choice" value="name">
                <Menu.RadioItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span className="menu-choice-text">Name</span>
              </Menu.RadioItem>
              <Menu.RadioItem className="menu-choice" value="type">
                <Menu.RadioItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span className="menu-choice-text">Type</span>
              </Menu.RadioItem>
            </Menu.RadioGroup>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  )
}

function CaretDownIcon() {
  return (
    <svg className="caret" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M12 6H4l4 4.5z" />
    </svg>
  )
}

function CheckIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  )
}

GroupLabel names a Group or a RadioGroup.

MenuGroupLabels.tsx

import { useState } from 'react'
import { Menu } from '@hamur/react/menu'

export default function MenuGroupLabelsExample() {
  const [value, setValue] = useState('date')
  const [showMinimap, setShowMinimap] = useState(true)
  const [showSearch, setShowSearch] = useState(true)
  const [showSidebar, setShowSidebar] = useState(false)

  return (
    <Menu.Root>
      <Menu.Trigger className="button">
        View <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner sideOffset={8} align="start">
          <Menu.Popup className="menu">
            <Menu.RadioGroup value={value} onValueChange={setValue}>
              <Menu.GroupLabel className="menu-label">Sort</Menu.GroupLabel>
              <Menu.RadioItem className="menu-choice" value="date">
                <Menu.RadioItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span className="menu-choice-text">Date</span>
              </Menu.RadioItem>
              <Menu.RadioItem className="menu-choice" value="name">
                <Menu.RadioItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span className="menu-choice-text">Name</span>
              </Menu.RadioItem>
              <Menu.RadioItem className="menu-choice" value="type">
                <Menu.RadioItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span className="menu-choice-text">Type</span>
              </Menu.RadioItem>
            </Menu.RadioGroup>

            <Menu.Separator className="menu-separator" />

            <Menu.Group>
              <Menu.GroupLabel className="menu-label">Workspace</Menu.GroupLabel>
              <Menu.CheckboxItem
                className="menu-choice"
                checked={showMinimap}
                onCheckedChange={setShowMinimap}
              >
                <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.CheckboxItemIndicator>
                <span className="menu-choice-text">Minimap</span>
              </Menu.CheckboxItem>
              <Menu.CheckboxItem
                className="menu-choice"
                checked={showSearch}
                onCheckedChange={setShowSearch}
              >
                <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.CheckboxItemIndicator>
                <span className="menu-choice-text">Search</span>
              </Menu.CheckboxItem>
              <Menu.CheckboxItem
                className="menu-choice"
                checked={showSidebar}
                onCheckedChange={setShowSidebar}
              >
                <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                  <CheckIcon />
                </Menu.CheckboxItemIndicator>
                <span className="menu-choice-text">Sidebar</span>
              </Menu.CheckboxItem>
            </Menu.Group>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  )
}

function CaretDownIcon() {
  return (
    <svg className="caret" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M12 6H4l4 4.5z" />
    </svg>
  )
}

function CheckIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  )
}

SubmenuRoot and SubmenuTrigger open a nested menu.

MenuSubmenu.tsx

import { Menu } from '@hamur/react/menu'

// The submenu sits 4px off its trigger, and lines up with the parent popup's padding.
const offset = ({ side }: { side: string }) => (side === 'top' || side === 'bottom' ? 4 : -4)

export default function MenuSubmenuExample() {
  return (
    <Menu.Root>
      <Menu.Trigger className="button">
        Song <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner sideOffset={8} align="start">
          <Menu.Popup className="menu">
            <Menu.Item className="menu-item">Add to Library</Menu.Item>
            <Menu.SubmenuRoot>
              <Menu.SubmenuTrigger className="menu-item">Add to Playlist</Menu.SubmenuTrigger>
              <Menu.Portal>
                <Menu.Positioner sideOffset={offset} alignOffset={offset}>
                  <Menu.Popup className="menu">
                    <Menu.Item className="menu-item">Get Up!</Menu.Item>
                    <Menu.Item className="menu-item">Inside Out</Menu.Item>
                    <Menu.Item className="menu-item">Night Beats</Menu.Item>
                    <Menu.Separator className="menu-separator" />
                    <Menu.Item className="menu-item">New playlist…</Menu.Item>
                  </Menu.Popup>
                </Menu.Positioner>
              </Menu.Portal>
            </Menu.SubmenuRoot>
            <Menu.Separator className="menu-separator" />
            <Menu.Item className="menu-item">Play Next</Menu.Item>
            <Menu.Item className="menu-item">Play Last</Menu.Item>
            <Menu.Separator className="menu-separator" />
            <Menu.Item className="menu-item">Favorite</Menu.Item>
            <Menu.Item className="menu-item">Share</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  )
}

function CaretDownIcon() {
  return (
    <svg className="caret" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M12 6H4l4 4.5z" />
    </svg>
  )
}

A trigger outside Root opens it through a handle.

MenuDetachedTriggersSimple.tsx

import { Menu } from '@hamur/react/menu'

const projectMenu = Menu.createHandle()

export default function MenuDetachedTriggersSimpleExample() {
  return (
    <>
      <Menu.Trigger
        className="button button-square"
        handle={projectMenu}
        aria-label="Project actions"
      >
        <EllipsisIcon />
      </Menu.Trigger>
      <Menu.Root handle={projectMenu}>
        <Menu.Portal>
          <Menu.Positioner sideOffset={8} align="start">
            <Menu.Popup className="menu">
              <Menu.Item className="menu-item">Rename</Menu.Item>
              <Menu.Item className="menu-item">Duplicate</Menu.Item>
              <Menu.Item className="menu-item">Move to folder</Menu.Item>
              <Menu.Separator className="menu-separator" />
              <Menu.Item className="menu-item">Archive</Menu.Item>
              <Menu.Item className="menu-item">Delete</Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
    </>
  )
}

function EllipsisIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <circle cx="3" cy="8" r="1" />
      <circle cx="8" cy="8" r="1" />
      <circle cx="13" cy="8" r="1" />
    </svg>
  )
}

open with triggerId lets several triggers share one menu.

MenuDetachedTriggersControlled.tsx

import { useState } from 'react'
import { Menu } from '@hamur/react/menu'

const itemGroups = {
  library: ['Add to library', 'Add to favorites'],
  playback: ['Play', 'Add to queue'],
  share: ['Share', 'Copy link'],
}

const mediaMenu = Menu.createHandle<keyof typeof itemGroups>()

export default function MenuDetachedTriggersControlledExample() {
  const [open, setOpen] = useState(false)
  const [activeTrigger, setActiveTrigger] = useState<string | null>(null)

  const handleOpenChange = (isOpen: boolean, details: Menu.Root.ChangeEventDetails) => {
    setOpen(isOpen)
    if (isOpen) setActiveTrigger(details.trigger?.id ?? null)
  }

  return (
    <>
      <div className="menu-row">
        <Menu.Trigger className="button" handle={mediaMenu} id="menu-trigger-1" payload="library">
          Library
        </Menu.Trigger>
        <Menu.Trigger className="button" handle={mediaMenu} id="menu-trigger-2" payload="playback">
          Playback
        </Menu.Trigger>
        <Menu.Trigger className="button" handle={mediaMenu} id="menu-trigger-3" payload="share">
          Share
        </Menu.Trigger>
        <button
          type="button"
          className="button"
          onClick={() => {
            setActiveTrigger('menu-trigger-2')
            setOpen(true)
          }}
        >
          Open playback (controlled)
        </button>
      </div>
      <Menu.Root
        handle={mediaMenu}
        open={open}
        triggerId={activeTrigger}
        onOpenChange={handleOpenChange}
      >
        {({ payload }) => (
          <Menu.Portal>
            <Menu.Positioner sideOffset={8} align="start">
              <Menu.Popup className="menu">
                {payload &&
                  itemGroups[payload].map((label) => (
                    <Menu.Item key={label} className="menu-item">
                      {label}
                    </Menu.Item>
                  ))}
              </Menu.Popup>
            </Menu.Positioner>
          </Menu.Portal>
        )}
      </Menu.Root>
    </>
  )
}

Arrow points the popup at its trigger.

MenuArrow.tsx

import { Menu } from '@hamur/react/menu'

export default function MenuArrowExample() {
  return (
    <Menu.Root>
      <Menu.Trigger className="button">
        Song <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner sideOffset={({ side }) => (side === 'top' ? 12 : 8)}>
          <Menu.Popup className="menu">
            <Menu.Arrow className="arrow" />
            <Menu.Item className="menu-item">Add to Library</Menu.Item>
            <Menu.Item className="menu-item">Add to Playlist</Menu.Item>
            <Menu.Separator className="menu-separator" />
            <Menu.Item className="menu-item">Play Next</Menu.Item>
            <Menu.Item className="menu-item">Play Last</Menu.Item>
            <Menu.Separator className="menu-separator" />
            <Menu.Item className="menu-item">Favorite</Menu.Item>
            <Menu.Item className="menu-item">Share</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  )
}

function CaretDownIcon() {
  return (
    <svg className="caret" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M12 6H4l4 4.5z" />
    </svg>
  )
}

Viewport animates the content when another trigger opens the same menu.

MenuDetachedTriggersFull.tsx

import { Fragment } from 'react'
import { Menu } from '@hamur/react/menu'

const menus = {
  library: {
    heading: 'Library',
    groups: [
      ['Add to library', 'Add to favorites'],
      ['Create playlist', 'Create station'],
    ],
  },
  playback: {
    heading: 'Playback',
    groups: [
      ['Play now', 'Add to queue'],
      ['Play next', 'Play last', 'Sleep timer'],
    ],
  },
  share: {
    heading: 'Share',
    groups: [
      ['Copy link', 'Copy embed code'],
      ['Share to contacts', 'Share to social'],
    ],
  },
}

const mediaMenu = Menu.createHandle<keyof typeof menus>()

export default function MenuDetachedTriggersFullExample() {
  return (
    <div className="menu-row">
      <Menu.Trigger className="button" handle={mediaMenu} payload="library">
        Library
      </Menu.Trigger>
      <Menu.Trigger className="button" handle={mediaMenu} payload="playback">
        Playback
      </Menu.Trigger>
      <Menu.Trigger className="button" handle={mediaMenu} payload="share">
        Share
      </Menu.Trigger>
      <Menu.Root handle={mediaMenu} modal={false}>
        {({ payload }) => (
          <Menu.Portal>
            <Menu.Positioner className="menu-morph-positioner" sideOffset={8} align="start">
              <Menu.Popup className="menu menu-morph">
                <Menu.Viewport className="menu-viewport">
                  {payload &&
                    menus[payload].groups.map((group, index) => (
                      <Fragment key={index}>
                        <Menu.Group>
                          {index === 0 && (
                            <Menu.GroupLabel className="menu-label">
                              {menus[payload].heading}
                            </Menu.GroupLabel>
                          )}
                          {group.map((item) => (
                            <Menu.Item key={item} className="menu-item">
                              {item}
                            </Menu.Item>
                          ))}
                        </Menu.Group>
                        {index < menus[payload].groups.length - 1 && (
                          <Menu.Separator className="menu-separator" />
                        )}
                      </Fragment>
                    ))}
                </Menu.Viewport>
              </Menu.Popup>
            </Menu.Positioner>
          </Menu.Portal>
        )}
      </Menu.Root>
    </div>
  )
}

FilterProvider, Input and List narrow the items as the person types.

FilterableMenu.tsx

import { Menu } from '@hamur/react/menu'

export default function FilterableMenuExample() {
  return (
    <Menu.FilterProvider>
      <Menu.Root>
        <Menu.Trigger className="button">Add label</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner sideOffset={6}>
            <Menu.Popup className="menu">
              <Menu.Input
                className="input"
                aria-label="Filter labels"
                placeholder="Filter labels"
              />
              <Menu.List>
                <Menu.Item className="menu-item">Bug</Menu.Item>
                <Menu.Item className="menu-item">Documentation</Menu.Item>
                <Menu.Item className="menu-item">Enhancement</Menu.Item>
                <Menu.Item className="menu-item">Question</Menu.Item>
              </Menu.List>
              <Menu.Empty className="muted">No labels found</Menu.Empty>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
    </Menu.FilterProvider>
  )
}

A menu of grouped actions with a filter field, and submenus with their own. Groups with no match hide, and the empty state shows when nothing matches.

MenuFilter.tsx

import { Menu } from '@hamur/react/menu'

const sharingOptions = [
  'Email',
  'Messages',
  'AirDrop',
  'Copy link',
  'Invite collaborators',
  'Publish to web',
  'Send a copy',
]
const folderOptions = [
  'Desktop',
  'Documents',
  'Downloads',
  'Projects',
  'Archive',
  'Shared',
  'Trash',
]
const exportOptions = [
  'PDF document',
  'Word document',
  'Plain text',
  'Rich text',
  'Markdown',
  'HTML page',
  'Image',
]
const sortOptions = [
  ['date', 'Date modified'],
  ['name', 'Name'],
  ['size', 'Size'],
]

// The submenus sit 4px off their trigger, and line up with the parent popup's padding.
const offset = ({ side }: { side: string }) => (side === 'top' || side === 'bottom' ? 4 : -4)

export default function MenuFilterExample() {
  return (
    <Menu.FilterProvider>
      <Menu.Root>
        <Menu.Trigger className="button">
          Actions <CaretDownIcon />
        </Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner sideOffset={8} align="start">
            <Menu.Popup className="menu menu-filter">
              <div className="menu-filter-field">
                <Menu.Input
                  className="menu-filter-input"
                  aria-label="Filter actions"
                  placeholder="e.g. Save"
                />
                <Menu.Clear className="menu-filter-clear">
                  <ClearIcon />
                </Menu.Clear>
              </div>
              <Menu.Empty className="menu-filter-empty">No actions found.</Menu.Empty>
              <Menu.List className="menu-filter-list">
                <Menu.Group className="menu-filter-section">
                  <Menu.GroupLabel className="menu-label">File</Menu.GroupLabel>
                  <Menu.Item className="menu-item">New file</Menu.Item>
                  <Menu.Item className="menu-item">Open file</Menu.Item>
                  <Menu.Item className="menu-item">Save</Menu.Item>
                  <Menu.Item className="menu-item">Save as</Menu.Item>
                  <Menu.Item className="menu-item">Duplicate</Menu.Item>
                  <Menu.Item className="menu-item">Rename</Menu.Item>
                </Menu.Group>
                <Menu.Group className="menu-filter-section">
                  <Menu.Separator className="menu-separator" />
                  <Menu.GroupLabel className="menu-label">Organize</Menu.GroupLabel>
                  <FilterableSubmenu
                    label="Move to folder"
                    inputLabel="Filter folders"
                    placeholder="e.g. Projects"
                    emptyText="No folders found."
                    options={folderOptions}
                  />
                  <Menu.SubmenuRoot>
                    <Menu.SubmenuTrigger className="menu-item">Share</Menu.SubmenuTrigger>
                    <Menu.Portal>
                      <Menu.Positioner sideOffset={offset} alignOffset={offset}>
                        <Menu.Popup className="menu menu-filter">
                          <Menu.List className="menu-filter-list">
                            {sharingOptions.map((option) => (
                              <Menu.Item key={option} className="menu-item">
                                {option}
                              </Menu.Item>
                            ))}
                          </Menu.List>
                        </Menu.Popup>
                      </Menu.Positioner>
                    </Menu.Portal>
                  </Menu.SubmenuRoot>
                  <FilterableSubmenu
                    label="Export"
                    inputLabel="Filter export formats"
                    placeholder="e.g. PDF"
                    emptyText="No export formats found."
                    options={exportOptions}
                  />
                  <Menu.Item className="menu-item">Download a copy</Menu.Item>
                  <Menu.Item className="menu-item">Delete</Menu.Item>
                </Menu.Group>
                <Menu.RadioGroup className="menu-filter-section" defaultValue="date">
                  <Menu.Separator className="menu-separator" />
                  <Menu.GroupLabel className="menu-label">Sort by</Menu.GroupLabel>
                  {sortOptions.map(([value, label]) => (
                    <Menu.RadioItem key={value} className="menu-choice" value={value}>
                      <Menu.RadioItemIndicator className="menu-choice-indicator">
                        <CheckIcon />
                      </Menu.RadioItemIndicator>
                      <span className="menu-choice-text">{label}</span>
                    </Menu.RadioItem>
                  ))}
                </Menu.RadioGroup>
                <Menu.Group className="menu-filter-section">
                  <Menu.Separator className="menu-separator" />
                  <Menu.GroupLabel className="menu-label">View</Menu.GroupLabel>
                  <Menu.CheckboxItem className="menu-choice" defaultChecked>
                    <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                      <CheckIcon />
                    </Menu.CheckboxItemIndicator>
                    <span className="menu-choice-text">Show details</span>
                  </Menu.CheckboxItem>
                  <Menu.CheckboxItem className="menu-choice">
                    <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                      <CheckIcon />
                    </Menu.CheckboxItemIndicator>
                    <span className="menu-choice-text">Show sidebar</span>
                  </Menu.CheckboxItem>
                  <Menu.CheckboxItem className="menu-choice">
                    <Menu.CheckboxItemIndicator className="menu-choice-indicator">
                      <CheckIcon />
                    </Menu.CheckboxItemIndicator>
                    <span className="menu-choice-text">Keep available offline</span>
                  </Menu.CheckboxItem>
                </Menu.Group>
              </Menu.List>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
    </Menu.FilterProvider>
  )
}

function FilterableSubmenu(props: {
  label: string
  inputLabel: string
  placeholder: string
  emptyText: string
  options: string[]
}) {
  return (
    <Menu.FilterProvider>
      <Menu.SubmenuRoot>
        <Menu.SubmenuTrigger className="menu-item">{props.label}</Menu.SubmenuTrigger>
        <Menu.Portal>
          <Menu.Positioner sideOffset={offset} alignOffset={offset}>
            <Menu.Popup className="menu menu-filter">
              <div className="menu-filter-field">
                <Menu.Input
                  className="menu-filter-input"
                  aria-label={props.inputLabel}
                  placeholder={props.placeholder}
                />
                <Menu.Clear className="menu-filter-clear">
                  <ClearIcon />
                </Menu.Clear>
              </div>
              <Menu.Empty className="menu-filter-empty">{props.emptyText}</Menu.Empty>
              <Menu.List className="menu-filter-list">
                {props.options.map((option) => (
                  <Menu.Item key={option} className="menu-item">
                    {option}
                  </Menu.Item>
                ))}
              </Menu.List>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.SubmenuRoot>
    </Menu.FilterProvider>
  )
}

function CaretDownIcon() {
  return (
    <svg className="caret" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M12 6H4l4 4.5z" />
    </svg>
  )
}

function ClearIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
      <path d="m3.5 3.5 9 9m0-9-9 9" />
    </svg>
  )
}

function CheckIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  )
}

API reference

99 props across 25 parts, in React syntax. className, style, render are listed once, under Shared props.

Arrow`Menu.Arrow`

Displays an element positioned against the menu anchor. Renders a <div>.

Arrow data attributes
Data attribute	Description
`data-open`	Present when the menu popup is open.
`data-closed`	Present when the menu popup is closed.
`data-side`	Indicates which side the popup is positioned relative to the anchor.
`data-align`	Indicates how the popup is aligned relative to specified side.
`data-uncentered`	Present when the menu arrow is uncentered.

Backdrop`Menu.Backdrop`

An overlay displayed beneath the menu popup. Renders a <div>.

Backdrop data attributes
Data attribute	Description
`data-open`	Present when the menu is open.
`data-closed`	Present when the menu is closed.
`data-starting-style`	Present when the menu begins animating in.
`data-ending-style`	Present when the menu is animating out.

CheckboxItem`Menu.CheckboxItem`

A menu item that toggles a setting on or off. Renders a <div>.

CheckboxItem props
Prop	Type	Default
`label`Overrides the text used for keyboard text navigation and filtering.	`string`	`—`
`defaultChecked`Whether the checkbox item is initially ticked.	`boolean`	`false`
`checked`Whether the checkbox item is currently ticked.	`boolean`	`—`
`onCheckedChange`Event handler called when the checkbox item is ticked or unticked.	`((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void)`	`—`
`onClick`The click handler for the menu item.	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	`—`
`closeOnClick`Whether to close the menu when the item is clicked.	`boolean`	`false`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`false`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`

CheckboxItem data attributes
Data attribute	Description
`data-checked`	Present when the menu checkbox item is checked.
`data-unchecked`	Present when the menu checkbox item is not checked.
`data-disabled`	Present when the menu checkbox item is disabled.
`data-highlighted`	Present when the menu checkbox item is highlighted.

CheckboxItemIndicator`Menu.CheckboxItemIndicator`

Indicates whether the checkbox item is ticked. Renders a <span>.

CheckboxItemIndicator props
Prop	Type	Default
`keepMounted`Whether to keep the HTML element in the DOM when the checkbox item is not checked.	`boolean`	`false`

CheckboxItemIndicator data attributes
Data attribute	Description
`data-checked`	Present when the menu checkbox item is checked.
`data-unchecked`	Present when the menu checkbox item is not checked.
`data-disabled`	Present when the menu checkbox item is disabled.
`data-starting-style`	Present when the indicator begins animating in.
`data-ending-style`	Present when the indicator is animating out.

Clear`Menu.Clear`

A button that clears the input text. Requires the menu to be wrapped in Menu.FilterProvider. when the input has text. Renders a <button>.

Clear props
Prop	Type	Default
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`true`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`

Clear data attributes
Data attribute	Description
`data-disabled`	Present when the button is disabled.

Empty`Menu.Empty`

A message shown when the menu has no matching items. Requires the menu to be wrapped in Menu.FilterProvider. Renders a <div>.

FilterProvider`Menu.FilterProvider`

Enables filtering for the menu or submenu it wraps. Add Menu.Input to the popup and place its items in Menu.List. Wrap each searchable submenu in its own provider. Doesn’t render its own element.

FilterProvider props
Prop	Type	Default
`defaultValue`The uncontrolled filter query when the menu is initially rendered.	`string`	`—`
`value`The filter query.	`string`	`—`
`onValueChange`Event handler called when the filter query changes.	`((value: string, eventDetails: FilterDropdownRootChangeEventDetails) => void)`	`—`
`autoHighlight`Whether filtering highlights the first matching item automatically.	`boolean \| "always"`	`false`
`filter`Filter function used to match items against the query.	`((text: string, query: string) => boolean) \| null`	`—`
`locale`The locale the default `filter` uses for string comparison.	`Intl.LocalesArgument`	`—`
`children`The `<Menu.Root>` or `<Menu.SubmenuRoot>` to make filterable.	`React.ReactNode`	`—`

Group`Menu.Group`

Groups related menu items with the corresponding label. Renders a <div>.

Group props
Prop	Type	Default
`children`The content of the component.	`React.ReactNode`	`—`

GroupLabel`Menu.GroupLabel`

An accessible label that is automatically associated with its parent group. Renders a <div>.

Input`Menu.Input`

A search field that filters the menu items. Requires the menu to be wrapped in Menu.FilterProvider. Renders an <input>.

Input data attributes
Data attribute	Description
`data-highlighted`	Present while the input shows its focus ring. Cleared when keyboard navigation highlights an item.

Item`Menu.Item`

An individual interactive item in the menu. Renders a <div>.

Item props
Prop	Type	Default
`label`Overrides the text used for keyboard text navigation and filtering.	`string`	`—`
`onClick`The click handler for the menu item.	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	`—`
`closeOnClick`Whether to close the menu when the item is clicked.	`boolean`	`true`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`false`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`

Item data attributes
Data attribute	Description
`data-highlighted`	Present when the menu item is highlighted.
`data-disabled`	Present when the menu item is disabled.

LinkItem`Menu.LinkItem`

A link in the menu that can be used to navigate to a different page or section. Renders an <a>.

LinkItem props
Prop	Type	Default
`label`Overrides the text used for keyboard text navigation and filtering.	`string`	`—`
`closeOnClick`Whether to close the menu when the item is clicked.	`boolean`	`false`

LinkItem data attributes
Data attribute	Description
`data-highlighted`	Present when the link is highlighted.

List`Menu.List`

Groups menu items so other content, such as a filter input, can share the popup. Renders a <div>.

Popup`Menu.Popup`

A container for the menu items. Renders a <div>.

Popup props
Prop	Type	Default
`finalFocus`Determines the element to focus when the menu is closed.	`boolean \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| void \| HTMLElement \| null)`	`—`
`children`	`React.ReactNode`	`—`

Popup data attributes
Data attribute	Description
`data-open`	Present when the menu is open.
`data-closed`	Present when the menu is closed.
`data-starting-style`	Present when the menu begins animating in.
`data-ending-style`	Present when the menu is animating out.
`data-side`	Indicates which side the popup is positioned relative to the anchor.
`data-align`	Indicates how the popup is aligned relative to specified side.
`data-instant`	Present if animations should be instant.

Portal`Menu.Portal`

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div>.

Portal props
Prop	Type	Default
`container`A parent element to render the portal element into.	`HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`	`—`
`keepMounted`Whether to keep the portal mounted in the DOM while the popup is hidden.	`boolean`	`false`

Positioner`Menu.Positioner`

Positions the menu popup against the trigger. Renders a <div>.

Positioner props
Prop	Type	Default
`disableAnchorTracking`Whether to disable the popup from tracking any layout shift of its positioning anchor.	`boolean`	`false`
`align`How to align the popup relative to the specified side.	`Align`	`'center'`
`alignOffset`Additional offset along the alignment axis in pixels.	`number \| OffsetFunction`	`0`
`side`Which side of the anchor element to align the popup against.	`Side`	`'bottom'`
`sideOffset`Distance between the anchor and the popup in pixels.	`number \| OffsetFunction`	`0`
`arrowPadding`Minimum distance to maintain between the arrow and the edges of the popup.	`number`	`5`
`anchor`An element to position the popup against.	`Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => Element \| VirtualElement \| null) \| null`	`—`
`collisionAvoidance`Determines how to handle collisions when positioning the popup.	`CollisionAvoidance`	`—`
`collisionBoundary`An element or a rectangle that delimits the area that the popup is confined to.	`Boundary`	`'clipping-ancestors'`
`collisionPadding`Additional space to maintain from the edge of the collision boundary.	`Padding`	`5`
`sticky`Whether to maintain the popup in the viewport after	`boolean`	`false`
`positionMethod`Determines which CSS `position` property to use.	`"absolute" \| "fixed"`	`'absolute'`

Positioner data attributes
Data attribute	Description
`data-open`	Present when the menu popup is open.
`data-closed`	Present when the menu popup is closed.
`data-anchor-hidden`	Present when the anchor is hidden.
`data-side`	Indicates which side the popup is positioned relative to the anchor.
`data-align`	Indicates how the popup is aligned relative to the specified side.

Positioner CSS variables
CSS variable	Description
`--available-width`	The available width between the anchor and the edge of the viewport.
`--available-height`	The available height between the anchor and the edge of the viewport.
`--anchor-width`	The anchor's width.
`--anchor-height`	The anchor's height.
`--transform-origin`	The coordinates that this element is anchored to. Used for animations and transitions.
`--positioner-width`	The width of the menu's positioner. It is important to set `width` to this value when using CSS to animate size changes.
`--positioner-height`	The height of the menu's positioner. It is important to set `height` to this value when using CSS to animate size changes.

RadioGroup`Menu.RadioGroup`

Groups related radio items. Renders a <div>.

RadioGroup props
Prop	Type	Default
`defaultValue`The uncontrolled value of the radio item that should be initially selected.	`any`	`—`
`value`The controlled value of the radio item that should be currently selected.	`any`	`—`
`onValueChange`Function called when the selected value changes.	`((value: any, eventDetails: MenuRootChangeEventDetails) => void)`	`—`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`
`children`The content of the component.	`React.ReactNode`	`—`

RadioItem`Menu.RadioItem`

A menu item that works like a radio button in a given group. Renders a <div>.

RadioItem props
Prop	Type	Default
`label`Overrides the text used for keyboard text navigation and filtering.	`string`	`—`
`value`requiredValue of the radio item.	`any`	`—`
`onClick`The click handler for the menu item.	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	`—`
`closeOnClick`Whether to close the menu when the item is clicked.	`boolean`	`false`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`false`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`

RadioItem data attributes
Data attribute	Description
`data-checked`	Present when the menu radio item is selected.
`data-unchecked`	Present when the menu radio item is not selected.
`data-disabled`	Present when the menu radio item is disabled.
`data-highlighted`	Present when the menu radio item is highlighted.

RadioItemIndicator`Menu.RadioItemIndicator`

Indicates whether the radio item is selected. Renders a <span>.

RadioItemIndicator props
Prop	Type	Default
`keepMounted`Whether to keep the HTML element in the DOM when the radio item is inactive.	`boolean`	`false`

RadioItemIndicator data attributes
Data attribute	Description
`data-checked`	Present when the menu radio item is selected.
`data-unchecked`	Present when the menu radio item is not selected.
`data-disabled`	Present when the menu radio item is disabled.
`data-starting-style`	Present when the radio indicator begins animating in.
`data-ending-style`	Present when the radio indicator is animating out.

Root`Menu.Root`

Groups all parts of the menu. Doesn’t render its own element.

Root props
Prop	Type	Default
`defaultOpen`Whether the menu is initially open.	`boolean`	`false`
`open`Whether the menu is currently open.	`boolean`	`—`
`onOpenChange`Event handler called when the menu is opened or closed.	`((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)`	`—`
`highlightItemOnHover`Whether moving the pointer over items should highlight them.	`boolean`	`true`
`actionsRef`A ref to imperative actions.	`React.RefObject<MenuRootActions \| null>`	`—`
`closeParentOnEsc`When in a submenu, determines whether pressing the Escape key	`boolean`	`false`
`defaultTriggerId`ID of the trigger that the menu is associated with.	`string \| null`	`—`
`handle`A handle to associate the menu with a trigger.	`MenuHandle<Payload>`	`—`
`loopFocus`Whether to loop keyboard focus back to the first item	`boolean`	`true`
`modal`Determines if the menu enters a modal state when open.	`boolean`	`true`
`onItemHighlighted`Callback fired when an item is highlighted or unhighlighted.	`((highlightedItem: HTMLElement \| undefined, eventDetails: MenuRootHighlightEventDetails) => void)`	`—`
`onOpenChangeComplete`Event handler called after any animations complete when the menu is opened or closed.	`((open: boolean) => void)`	`—`
`triggerId`ID of the trigger that the menu is associated with.	`string \| null`	`—`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`
`orientation`The visual orientation of the menu.	`MenuRootOrientation`	`'vertical'`
`children`The content of the menu.	`React.ReactNode \| PayloadChildRenderFunction<Payload>`	`—`

Separator`Menu.Separator`

A separator element accessible to screen readers. Renders a <div>.

Separator props
Prop	Type	Default
`orientation`The orientation of the separator.	`Orientation`	`'horizontal'`

Separator data attributes
Data attribute	Description
`data-orientation`	Indicates the orientation of the separator.

SubmenuRoot`Menu.SubmenuRoot`

Groups all parts of a submenu. Doesn’t render its own element.

SubmenuRoot props
Prop	Type	Default
`defaultOpen`Whether the menu is initially open.	`boolean`	`false`
`open`Whether the menu is currently open.	`boolean`	`—`
`onOpenChange`Event handler called when the menu is opened or closed.	`((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)`	`—`
`highlightItemOnHover`Whether moving the pointer over items should highlight them.	`boolean`	`true`
`actionsRef`A ref to imperative actions.	`React.RefObject<MenuRootActions \| null>`	`—`
`closeParentOnEsc`When in a submenu, determines whether pressing the Escape key	`boolean`	`false`
`loopFocus`Whether to loop keyboard focus back to the first item	`boolean`	`true`
`onItemHighlighted`Callback fired when an item is highlighted or unhighlighted.	`((highlightedItem: HTMLElement \| undefined, eventDetails: MenuRootHighlightEventDetails) => void)`	`—`
`onOpenChangeComplete`Event handler called after any animations complete when the menu is opened or closed.	`((open: boolean) => void)`	`—`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`
`orientation`The visual orientation of the menu.	`MenuRootOrientation`	`'vertical'`
`children`The content of the submenu.	`React.ReactNode`	`—`

SubmenuTrigger`Menu.SubmenuTrigger`

A menu item that opens a submenu. Renders a <div>.

SubmenuTrigger props
Prop	Type	Default
`label`Overrides the text used for keyboard text navigation and filtering.	`string`	`—`
`onClick`	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	`—`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`false`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`
`openOnHover`Whether the menu should also open when the trigger is hovered.	`boolean`	`true`
`delay`How long to wait before the menu may be opened on hover.	`number`	`100`
`closeDelay`How long to wait before closing the menu that was opened on hover.	`number`	`0`

SubmenuTrigger data attributes
Data attribute	Description
`data-popup-open`	Present when the corresponding submenu is open.
`data-highlighted`	Present when the submenu trigger is highlighted.
`data-disabled`	Present when the submenu trigger is disabled.

Trigger`Menu.Trigger`

A button that opens the menu. Renders a <button>.

Trigger props
Prop	Type	Default
`handle`A handle to associate the trigger with a menu.	`MenuHandle<Payload>`	`—`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`true`
`payload`A payload to pass to the menu when it is opened.	`Payload`	`—`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`
`openOnHover`Whether the menu should also open when the trigger is hovered.	`boolean`	`—`
`delay`How long to wait before the menu may be opened on hover.	`number`	`100`
`closeDelay`How long to wait before closing the menu that was opened on hover.	`number`	`0`
`children`	`React.ReactNode`	`—`

Trigger data attributes
Data attribute	Description
`data-popup-open`	Present when the corresponding menu is open.
`data-pressed`	Present when the trigger is pressed.
`data-disabled`	Present when the trigger is disabled.

Viewport`Menu.Viewport`

A viewport for displaying content transitions. This component is only required if one popup can be opened by multiple triggers, its content changes based on the trigger, and switching between them is animated. Renders a <div>.

Viewport props
Prop	Type	Default
`children`The content to render inside the transition container.	`React.ReactNode`	`—`

Viewport data attributes
Data attribute	Description
`data-current`	Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
`data-previous`	Applied to the direct child of the viewport that contains the exiting content when transitions are present.
`data-activation-direction`	Indicates the direction from which the popup was activated. This can be used to create directional animations based on how the popup was triggered. Contains space-separated values for both horizontal and vertical axes.
`data-transitioning`	Indicates that the viewport is currently transitioning between old and new content.
`data-instant`	Present if animations should be instant.

Viewport CSS variables
CSS variable	Description
`--popup-width`	The width of the parent popup. This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered. It can be used to freeze the dimensions of the popup when animating between different content.
`--popup-height`	The height of the parent popup. This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered. It can be used to freeze the dimensions of the popup when animating between different content.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Keyboard
Keys	Does	Part
`EnterSpaceArrowDownArrowUp`	Opens the menu	Trigger
`ArrowDown`	Opens the menu and focuses the first item	Trigger
`ArrowUp`	Opens the menu and focuses the last item	Trigger
`ArrowDownArrowUp`	Moves to the next or previous item	Popup
`HomeEnd`	Moves to the first or last item	Popup
	Moves to the next item whose text, or `label`, starts with what was typed	Item
`Enter`	Activates the highlighted item and closes the menu	Item
`Space`	Checks or unchecks a checkbox item	CheckboxItem
`Enter`	Checks or unchecks a checkbox item	CheckboxItem
`EnterSpace`	Selects a radio item	RadioItem
`ArrowRight`	Opens a submenu and focuses its first item (`ArrowLeft` in right-to-left)	SubmenuTrigger
`ArrowLeft`	Closes a submenu and returns focus to its trigger	SubmenuTrigger
`Escape`	Closes the menu and keeps focus on the trigger	Popup
`Escape`	In a submenu, closes only the submenu unless `closeParentOnEsc` is on	SubmenuRoot
`Tab`	Closes the menu and moves focus to the element after the trigger	Popup

Accessibility

What the parts set
Part	Sets	So that
Trigger	`aria-haspopup="menu"`, `aria-expanded`, `aria-controls`	a screen reader says the button opens a menu and whether it is open
Popup	`role="menu"`	the popup is announced as a menu
Item	`role="menuitem"`	each action is read as a menu item
CheckboxItem	`role="menuitemcheckbox"`, `aria-checked`	a setting is read with its on or off state
RadioItem	`role="menuitemradio"`, `aria-checked`	the chosen option of a set is read
Group	`role="group"`, `aria-labelledby` to its GroupLabel	related items are read under their label
SubmenuTrigger	`aria-controls` to the submenu	a screen reader knows the item opens another menu
Separator	`role="separator"`	groups are divided for screen readers too
CheckboxItemIndicator	`aria-hidden="true"`	the tick is decoration; the state is on the item
Arrow	`aria-hidden="true"`	the decorative arrow is not read

Focus order

Opening with a key moves focus to the first item, or the last with ArrowUp.
Arrow keys move focus between items; only one item is a tab stop.
Escape closes the menu and returns focus to Trigger; Tab closes it and moves on.

Installation

Anatomy

Examples

Open On Hover

Checkbox Items

Radio Items

Group Labels

Submenu

Detached Triggers Simple

Detached Triggers Controlled

Arrow

Detached Triggers Full

Filterable Menu

Filter

API reference

ArrowMenu.Arrow

BackdropMenu.Backdrop

CheckboxItemMenu.CheckboxItem

CheckboxItemIndicatorMenu.CheckboxItemIndicator

ClearMenu.Clear

EmptyMenu.Empty

FilterProviderMenu.FilterProvider

GroupMenu.Group

GroupLabelMenu.GroupLabel

InputMenu.Input

ItemMenu.Item

LinkItemMenu.LinkItem

ListMenu.List

PopupMenu.Popup

PortalMenu.Portal

PositionerMenu.Positioner

RadioGroupMenu.RadioGroup

RadioItemMenu.RadioItem

RadioItemIndicatorMenu.RadioItemIndicator

RootMenu.Root

SeparatorMenu.Separator

SubmenuRootMenu.SubmenuRoot

SubmenuTriggerMenu.SubmenuTrigger

TriggerMenu.Trigger

ViewportMenu.Viewport