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 = " border "
boxShadow = { 300 }
>
< 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 >
Show more
Properties Name Type Default Description Required? childrenReact.Noderolemenu, listmenuinnerRefReact.RefUsed if you need to compose Menu with Downshift
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 >
Name Type Default Description Required? childrenReact.NodetitleReact.RefIf provided, a group header will be rendered in the menu appearancedefault, flushfalseUse the flush appearance if you’re using the menu outside of a popout
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 >
Name Type Default Description Required? childrenReact.NodedisabledbooleanfalseonClick(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 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 "
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 >
Show more
Groups
< Box
width = " 220px "
border = { 500 }
borderRadius = " outer "
borderColor = " border "
boxShadow = { 300 }
>
< 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 >
Show more
Using dividers
< Box
width = " 220px "
border = { 500 }
borderRadius = " outer "
borderColor = " border "
boxShadow = { 300 }
>
< 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.Divider />
< 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.Divider />
< Text as = " div " py = { 350 } px = { 400 } fontSize = { 100 } color = " text.subtext " >
If you need to , you can include some helpful text here at the bottom of
the menu .
</ Text >
</ Menu >
</ Box >
Show more
< Box
width = " 250px "
border = { 500 }
borderRadius = " outer "
borderColor = " border "
boxShadow = { 300 }
>
< 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 = " sparkles " color = " purple.600 " />
</ Tooltip >
}
>
< Box display = " flex " alignItems = " center " justifyContent = " space-between " >
< Text as = " div " fontWeight = " semibold " >
Banana
</ Text >
</ Box >
</ Menu.Item >
</ Menu.Group >
</ Menu >
</ Box >
Show more
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 = " border "
boxShadow = { 300 }
>
< Menu role = " list " >
< Menu.Group title = " Fruit " >
< Menu.Item
elemAfter = {
< Button p = { 100 } >
< Icon name = " trash-can-outline " />
</ Button >
}
>
Apple
</ Menu.Item >
< Menu.Item
elemAfter = {
< Button p = { 100 } >
< Icon name = " trash-can-outline " />
</ Button >
}
>
Orange
</ Menu.Item >
< Menu.Item
elemAfter = {
< Button p = { 100 } >
< Icon name = " trash-can-outline " />
</ Button >
}
>
Banana
</ Menu.Item >
</ Menu.Group >
</ Menu >
</ Box >
Show more
