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#

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.

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?