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
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
MenuItem
onPressOnPressFunction
Called when the menu item is selected. Generally use this instead of onClick.
disabledboolean
Disable this menu item
children*ReactNode
Pass in a string to use standard text styles. Otherwise, pass in any other node.
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
MenuLabel
childrenReactNode
The name of the label