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'


rolemenu, listmenu
innerRefReact.RefUsed if you need to compose Menu with Downshift


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

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.

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 horizontal line with the “separator” role. Accepts the same props as


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.


Using dividers

Customizing menu items

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.