<Menu />
The
Menu
component is a building block for application menus.focusLast?: boolean
When
true
, the last element will be focused on mount.onClickOutside?: () => void
onEscape?: () => void
onItemClick?: () => void
space?: number | number[]
Hover the menu to see the focused item changing.
<Box padding={4}>
<Card radius={3} shadow={2}>
<Menu>
<MenuItem
fontSize={[2, 2, 3, 4]}
text="First option"
/>
<MenuItem
fontSize={[2, 2, 3, 4]}
text="Second option"
/>
<MenuItem
fontSize={[2, 2, 3, 4]}
text="Third option"
/>
</Menu>
</Card>
</Box>
The
MenuItem
component takes a children
property for rendering custom menu item .<Box padding={4}>
<Card radius={3} shadow={2}>
<Menu>
<MenuItem>
<Box padding={3}>
<Stack space={3}>
<Text weight="semibold">First option</Text>
<Text muted size={1}>
Description
</Text>
</Stack>
</Box>
</MenuItem>
<MenuItem>
<Box padding={3}>
<Stack space={3}>
<Text weight="semibold">Second option</Text>
<Text muted size={1}>
Description
</Text>
</Stack>
</Box>
</MenuItem>
<MenuDivider />
<MenuItem tone="critical">
<Box padding={3}>
<Stack space={3}>
<Text weight="semibold">Dangerous option</Text>
<Text muted size={1}>
Description
</Text>
</Stack>
</Box>
</MenuItem>
</Menu>
</Card>