The modal footer, wrapped with ModalFooter
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
footer
Description
Type
ReactNode
hideCloseButton
hideCloseButton
Description
Hide the close button
Type
boolean
hideOverlay
hideOverlay
Description
Hide the overlay
Type
boolean
title
title
Description
The modal title
Type
ReactNode
Was this helpful?