Components

Menu

Menus are used to present a list of actions to a user.

Menus are visually similar to the component, but Menus do not represent a selection, and are instead used to present a set of items that each have their own, independent action.

Menus can be rendered inline on a page, or you can place them in a popout using the MenuButton component.

import { Menu } from '@sproutsocial/racine'
<Box
width="200px"
border={500}
borderRadius="outer"
borderColor="container.border.base"
boxShadow='medium'
>
<Menu>
<Menu.Group title="Fruit">
<Menu.Item onClick={() => alert('Apple!')}>Apple</Menu.Item>
<Menu.Item onClick={() => alert('Orange!')}>Orange</Menu.Item>
<Menu.Item onClick={() => alert('Banana!')}>Banana</Menu.Item>
</Menu.Group>
</Menu>
</Box>

Properties

NameTypeDefaultDescriptionRequired?
childrenReact.Node
rolemenu, listmenu
innerRefReact.RefUsed if you need to compose Menu with Downshift
footerContentReact.NodeContent to display below the Menu.Items. Any interactive elements that you want to display below the menu should be passed here, not as children.

Subcomponents

Groups are used to provide default padding and spacing around items, and can optionally render a visual label for a group of items.

<Menu.Group title="Fruit">
<Box bg="neutral.100" p={400} />
</Menu.Group>
NameTypeDefaultDescriptionRequired?
childrenReact.Node
titleReact.RefIf provided, a group header will be rendered in the menu
appearancedefault, flushdefaultUse the flush appearance if you're using the menu group with a title outside of a popout
disabledbooleanfalseIf all of the items in a group are disabled, the group title should also be disabled

Represents a unique value within a menu. Selected items are indicated with a check icon and text.

<Box>
<Menu.Item onClick={() => alert('Apple!')}>Apple</Menu.Item>
<Menu.Item onClick={() => alert('Orange!')} selected>
Orange
</Menu.Item>
</Box>
NameTypeDefaultDescriptionRequired?
childrenReact.Node
disabledbooleanfalse
onClick(event) => ()
elemBeforeReact.NodeA component to be rendered before the children of the menu item
elemAfterReact.NodeA component to be rendered after the children of the menu item

A Menu Item with a visible representing a toggleable option. Use the placement prop to determine whether the Switch is positioned before its children or after the children. It will override the elemBefore or elemAfter prop of Menu.Item accordingly.

() => {
const [isChecked, setIsChecked] = useState(true);
return (
<Menu.Switch placement="after" onClick={() => setIsChecked(!isChecked)} selected={isChecked}>
Show Archived Tags
</Menu.Switch>
);
}

Switches may also be used directly in the footer of the Menu using when appropriate. Do not use Menu.Switch in this case.

Menu.Switch accepts the following props in addition to Menu.Item's props:

NameTypeDefaultDescriptionRequired?
placementbefore,afterShould the Switch be rendered in the elemBefore or elemAfter position?
switchPropsOmit<TypeSwitchProps, 'onClick'>Any additional props to pass to the Switch. onClick is omitted because the top-level onClick prop should be used instead.
labelPropsOmit<TypeTextProps, 'children'>Any additional props to add to the Switch's label. children is omitted because Menu.Switch's children is rendered as the label's children.

A horizontal line with the "separator" role. Accepts the same props as

Recipes

In a popout

In most cases, Menus appear nested within popouts that appear when a user clicks a button. Because this is such a common pattern, there is a MenuButton component that makes it easy to implement.

<MenuButton
appearance="secondary"
placement='bottom-end'
aria-label="Open menu"
px={450}
content={
<Menu width="200px">
<Menu.Group>
<Menu.Item onClick={() => alert('Kiwi!')}>Kiwi</Menu.Item>
<Menu.Item onClick={() => alert('Papaya!')}>Papaya</Menu.Item>
<Menu.Item onClick={() => alert('Mango!')}>Mango</Menu.Item>
</Menu.Group>
</Menu>
}
>
Fruits
</MenuButton>

Groups

<Box
width="220px"
border={500}
borderRadius="outer"
borderColor="container.border.base"
boxShadow='medium'
>
<Menu>
<Menu.Group title="Fruit">
<Menu.Item onClick={() => alert('Apple!')}>Apple</Menu.Item>
<Menu.Item onClick={() => alert('Orange!')}>Orange</Menu.Item>
<Menu.Item onClick={() => alert('Banana!')}>Banana</Menu.Item>
</Menu.Group>
<Menu.Group title="More fruit">
<Menu.Item onClick={() => alert('Kiwi!')}>Kiwi</Menu.Item>
<Menu.Item onClick={() => alert('Papaya!')}>Papaya</Menu.Item>
<Menu.Item onClick={() => alert('Mango!')}>Mango</Menu.Item>
</Menu.Group>
</Menu>
</Box>

Using dividers and footerContent

One use for Menu.Divider is to separate items in the menu from the footer. Any information that you would like to display below the menu items should be passed to Menu as . It is especially important to use footerContent when including interactive content, as it will not be accessible to keyboard users if passed as children.

<Box
width="220px"
border={500}
borderRadius="outer"
borderColor="container.border.base"
boxShadow='medium'
>
<Menu
footerContent={
<Box p={350}>
<Link onClick={() => {}}>
View Fruit Help
</Link>
</Box>
}
>
<Menu.Group title="Fruit">
<Menu.Item onClick={() => alert('Apple!')}>Apple</Menu.Item>
<Menu.Item onClick={() => alert('Orange!')}>Orange</Menu.Item>
<Menu.Item onClick={() => alert('Banana!')}>Banana</Menu.Item>
</Menu.Group>
<Menu.Divider />
</Menu>
</Box>

Customizing menu items

<Box
width="250px"
border={500}
borderRadius="outer"
borderColor="container.border.base"
boxShadow='medium'
>
<Menu>
<Menu.Group>
<Menu.Item onClick={() => alert('Apple!')}>
<Text as="div" fontWeight="semibold">
Apple
</Text>
<Text as="div" fontSize={100} color="text.subtext">
Some items in a menu might need descriptive text.
</Text>
</Menu.Item>
<Menu.Item onClick={() => alert('Orange!')}>
<Text as="div" fontWeight="semibold">
Orange
</Text>
</Menu.Item>
<Menu.Item
onClick={() => alert('Banana!')}
elemAfter={
<Tooltip placement="top" content="Special fruit">
<Icon name="sparkle-outline" color="purple.600" mt="-2px" aria-hidden />
</Tooltip>
}
>
<Box display="flex" alignItems="center" justifyContent="space-between">
<Text as="div" fontWeight="semibold">
Banana
</Text>
</Box>
</Menu.Item>
</Menu.Group>
</Menu>
</Box>

As a list

In some cases menu items themselves are not actionable, but represent items which have associated actions. In this case, you must set the role of the Menu component to list in order to be accessible.

<Box
width="250px"
border={500}
borderRadius="outer"
borderColor="container.border.base"
boxShadow='medium'
>
<Menu role="list">
<Menu.Group title="Fruit">
<Menu.Item
elemAfter={
<Button p={100} aria-label="Delete Apple">
<Icon name="trash-outline" aria-hidden />
</Button>
}
>
Apple
</Menu.Item>
<Menu.Item
elemAfter={
<Button p={100} aria-label="Delete Orange">
<Icon name="trash-outline" aria-hidden />
</Button>
}
>
Orange
</Menu.Item>
<Menu.Item
elemAfter={
<Button p={100} aria-label="Delete Banana">
<Icon name="trash-outline" aria-hidden />
</Button>
}
>
Banana
</Menu.Item>
</Menu.Group>
</Menu>
</Box>