Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Menu

A menu is used to create popover content with a list of options. To create a menu, Sancho exports the following components:

  • MenuList: A wrapper component that handles focusing MenuItems.
  • MenuItem: A list item in the menu.
  • MenuDivider: A horizontal divider for separating groups of menu items.
  • MenuLabel: A label for groups of menu items.

Basic usage

<div className="MenuList-example">
  <MenuList>
    <MenuItem contentBefore={<IconUser />} onPress={() => alert("Hello 1")}>
      Profile
    </MenuItem>
    <MenuItem contentBefore={<IconList />} component="a" href="#">
      Lists
    </MenuItem>
    <MenuItem contentBefore={<IconHome />}>Moments</MenuItem>
    <MenuDivider />
    <MenuItem contentBefore={<IconInstagram />}>Promote Mode</MenuItem>
    <MenuItem contentBefore={<IconPackage />} contentAfter="⌘A">
      Analytics
    </MenuItem>
  </MenuList>
</div>

Combine a MenuList with a Popover to create a dropdown menu.

<Popover
  content={
    <MenuList>
      <MenuItem contentBefore={<IconUser />} onPress={() => alert("Hello 1")}>
        Profile
      </MenuItem>
      <MenuItem contentBefore={<IconList />} component="a" href="#">
        Lists
      </MenuItem>
      <MenuItem contentBefore={<IconHome />}>Moments</MenuItem>
      <MenuDivider />
      <MenuItem contentBefore={<IconInstagram />}>Promote Mode</MenuItem>
      <MenuItem contentBefore={<IconPackage />} contentAfter="⌘A">
        Analytics
      </MenuItem>
    </MenuList>
  }
>
  <Button iconAfter={<IconChevronDown />}>User options</Button>
</Popover>

You can use a custom component such as an a or Link.

<MenuItem component="a" href="#">
  This is an anchor element
</MenuItem>

API

MenuDivider
cssInterpolationWithTheme<any>
MenuList
children*ReactElement<MenuItemProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | ... 14 more ... | (ReactElement<...>[] & ReactPortal)
A combination of MenuItem, MenuLabel, and MenuDivider children
focusableChildrenComponentType<any>[]
Useful if you are providing your own MenuItem children
cssInterpolationWithTheme<any>
MenuItem
focusboolean
onFocus() => void
onPressOnPressFunction
Called when the menu item is selected. Generally use this instead of onClick.
disabledboolean
Disable this menu item
childrenReactNode
Pass in a string to use standard text styles. Otherwise, pass in any other node.
onKeyDown(e: KeyboardEvent<Element>) => void
refRefObject<HTMLDivElement>
componentReactType<any>
Provide a custom component. Eg., ReactRouter Link
contentAfterReactNode
optional content to appear to the right of the menu text
contentBeforeReactNode
optional content to appear to the left of the menu text
cssInterpolationWithTheme<any>
MenuLabel
childrenReactNode
The name of the label
cssInterpolationWithTheme<any>