[DEV] Base Web documentation

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.

Overrides

Additionally, you can fully customize any part of the Menu through the overrides prop. The Menu consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

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.

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: {}
                    },
                  },
                },
              }}
            />
          );

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!