Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
205 lines (176 sloc) 6.29 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Basic from 'examples/menu/basic.js'; import Compact from 'examples/menu/compact.js'; import Profile from 'examples/menu/profile.js'; import Stateless from 'examples/menu/stateless.js'; import Child from 'examples/menu/child.js'; import VirtualList from 'examples/menu/virtual-list.js';

import Overrides from '../../components/overrides'; import {StatefulMenu, OptionProfile} from 'baseui/menu'; import * as MenuExports from 'baseui/menu'; import {Block} from 'baseui/block'; import Code from '../../components/code';

export default Layout;

Menu

Menus in Base Web provide an opportunity to nest various hierarchical navigation, features, or settings. Each menu item has an option to include an icon by default, but this can be removed. The menus themselves share the functionality and display of select menus.

When to use

  • When you want to display a navigational list.
  • When you want to display a list of actions.

Keybindings

  • KeyDown / KeyUp cycles down / up the menu list, highlighting items as needed.
  • Enter selects the currently highlighted item. If no item is highlighted, select the first item in the menu list.

Accessibility

In order to have the aria-activedescendant attribute set on the menu you need to provide menu item id as one of the properties returned from the getRequiredItemProps function that is called for each rendered item. The provided id will be set as a value for the item container's id attribute therefore it has to be unique on a page.

Examples

<Example title="Menu with Long Items List" path="menu/virtual-list.js" additionalPackages={{'react-virtualized': '^9.21.0'}}

Overrides

<Overrides name="Menu" component={MenuExports} renderExample={props => ( <React.Fragment> <StatefulMenu items={[ {label: 'Item One'}, {label: 'Item Two'}, {label: 'Item Three', disabled: true}, {label: 'Item Four', disabled: true}, {label: 'Item Five'}, {label: 'Item Six'}, ]} onItemSelect={console.log} overrides={props.overrides} />

Note: baseui/menu supports and exports two types of options: OptionList (default) and OptionProfile. You can opt-in into OptionProfile (example rendered bellow) by overriding the{' '} Option key. Since each override is an another component, you can pass additional overrides ( all Profile* components) to it as well and that's what we do bellow.

<StatefulMenu items={[...new Array(4)].map(() => ({ title: 'David Smith', subtitle: 'Senior Engineering Manager', body: 'Uber Everything', imgUrl: 'https://via.placeholder.com/60x60', }))} overrides={{ ...props.overrides, Option: { component: OptionProfile, props: { getProfileItemLabels: ({title, subtitle, body}) => ({ title, subtitle, body, }), getProfileItemImg: item => item.imgUrl, getProfileItemImgText: item => item.title, overrides: props.overrides, }, }, }} /> Source Code (override objects are empty just to demonstrate their placement) {import {StatefulMenu, OptionProfile} from 'baseui/menu'; export default () => ( <StatefulMenu items={[...new Array(4)].map(() => ({ title: 'David Smith', subtitle: 'Senior Engineering Manager', body: 'Uber Everything', imgUrl: 'https://via.placeholder.com/60x60', }))} overrides={{ List: {}, ListItem: {}, Option: { component: OptionProfile, props: { getProfileItemLabels: ({title, subtitle, body}) => ({ title, subtitle, body, }), getProfileItemImg: item => item.imgUrl, getProfileItemImgText: item => item.title, overrides: { ListItemProfile: {}, ProfileImgContainer: {}, ProfileImg: {}, ProfileLabelsContainer: {}, ProfileTitle: {}, ProfileSubtitle: {}, ProfileBody: {} }, }, }, }} /> );} </React.Fragment> )} />

API

<API heading="Menu API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/menu/menu.js')} />

<API heading="Stateful Menu API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/menu/stateful-menu.js')} />

<API heading="Stateful Container API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/menu/stateful-container.js')} />

<API heading="Menu Item Api" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/menu/option-list.js')} />

<API heading="Profile Menu Item Api" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/menu/option-profile.js')} />

You can’t perform that action at this time.