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>
Dropdown menu
Combine a MenuList with a Popover to create a dropdown menu.
User options
<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>
Show Code
MenuItem custom component
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
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
cssInterpolationWithTheme<any>
MenuLabel
childrenReactNode
The name of the label
cssInterpolationWithTheme<any>