Menu Dialog

A list of menu options inside a modal dialog.

MenuDialog can be used as a basis for global search or things like a command menu. It behaves exactly like a Menu, meaning it supports keyboard controls and letter navigation.

Import#

import { MenuDialog, MenuDialogList } from '@saas-ui/modals'

Usage#

function Page() {
  const disclosure = useDisclosure()

  return (
    <>
      <Button onClick={() => disclosure.onOpen()}>Open menu</Button>

      <MenuDialog {...disclosure}>
        <MenuDialogList title="Commands">
          <MenuItem icon={<FiUsers />} command="A">
            Assign
          </MenuItem>
          <MenuItem icon={<FiTag />} command="L">
            Add label
          </MenuItem>
          <MenuItem icon={<FiArchive />} command="C">
            Close
          </MenuItem>
        </MenuDialogList>
      </MenuDialog>
    </>
  )
}

Grouped items#

function Page() {
  const disclosure = useDisclosure()

  return (
    <>
      <Button onClick={() => disclosure.onOpen()}>Open menu</Button>

      <MenuDialog {...disclosure}>
        <MenuDialogList title="Commands">
          <MenuGroup title="Message">
            <MenuItem icon={<FiUsers />} command="A">
              Assign
            </MenuItem>
            <MenuItem icon={<FiTag />} command="L">
              Add label
            </MenuItem>
            <MenuItem icon={<FiArchive />} command="C">
              Close
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="Settings">
            <MenuItem icon={<FiSettings />}>Change theme</MenuItem>
          </MenuGroup>
        </MenuDialogList>
      </MenuDialog>
    </>
  )
}

Accessibility#

Keyboard Interaction#

Key	Action
`Enter` or `Space`	When the menu is open, closes the dialog.
`ArrowDown`	When the menu is open, moves focus down to the next item.
`ArrowUp`	When the menu is open, moves focus up to the next item.
`Escape`	When the menu is open, closes the menu.
`Tab`	no effect
`Home`	When the menu is open, moves focus to the first item.
`End`	When the menu is open, moves focus to the last item.
`A-Z` or `a-z`	When the menu is open, moves focus to the next menu item with a label that starts with the typed character if such an menu item exists.

Props#

MenuDialog Props#

`footer`

Description

The modal footer, wrapped with ModalFooter

Type

ReactNode

`hideCloseButton`

Description

Hide the close button

Type

boolean

`hideOverlay`

Description

Hide the overlay

Type

boolean

`title`

Description

The modal title

Type

ReactNode

Was this helpful?