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'

Properties

NameTypeDefaultDescriptionRequired?
childrenReact.Node
rolemenu, listmenu
innerRefReact.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.

Fruit
NameTypeDefaultDescriptionRequired?
childrenReact.Node
titleReact.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.

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 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.

Groups

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.

    Fruit