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.

Source
@saas-ui/modals
2.11.2 (latest)

Import#

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

Usage#

import { Button, useDisclosure, MenuItem } from '@chakra-ui/react'
import { MenuDialog, MenuDialogList } from '@saas-ui/react'
import { FiUsers, FiTag, FiArchive } from 'react-icons/fi'

export default 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#

import { Button, useDisclosure, MenuGroup, MenuItem } from '@chakra-ui/react'
import { MenuDialog, MenuDialogList } from '@saas-ui/react'
import { FiUsers, FiTag, FiArchive, FiSettings } from 'react-icons/fi'

export default 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.

Was this helpful?