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.10.0 (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?