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/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

KeyAction
Enter or SpaceWhen the menu is open, closes the dialog.
ArrowDownWhen the menu is open, moves focus down to the next item.
ArrowUpWhen the menu is open, moves focus up to the next item.
EscapeWhen the menu is open, closes the menu.
Tabno effect
HomeWhen the menu is open, moves focus to the first item.
EndWhen the menu is open, moves focus to the last item.
A-Z or a-zWhen 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?