1. Components
  2. Menu

<Menu />

The Menu component is a building block for application menus.

Properties  

focusLast?: boolean
When true, the last element will be focused on mount.
onClickOutside?: () => void
onEscape?: () => void
onItemClick?: () => void
space?: number | number[]

Basic example  

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>

Example with custom menu items  

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>
Made withby folks at