Menu

Menus in Base UI 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.

Examples

Menu Basic Usage
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten
  • Item Eleven
  • Item Twelve
Menu with Compact Menu Items
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten
  • Item Eleven
  • Item Twelve
Menu with Profile Menu
  • David Smith
    David Smith

    Senior Engineering Manager

    Uber Everything

  • David Smith
    David Smith

    Senior Engineering Manager

    Uber Everything

  • David Smith
    David Smith

    Senior Engineering Manager

    Uber Everything

  • David Smith
    David Smith

    Senior Engineering Manager

    Uber Everything

Menu Stateful example
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten
  • Item Eleven
  • Item Twelve
Menu with Child Menu
Menu with Long Items List

Overrides

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

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six

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.

  • David Smith
    David Smith

    Senior Engineering Manager

    Uber Everything

  • David Smith
    David Smith

    Senior Engineering Manager

    Uber Everything

  • David Smith
    David Smith

    Senior Engineering Manager

    Uber Everything

  • David Smith
    David Smith

    Senior Engineering Manager

    Uber Everything

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: {},
            ProfileLablesContainer: {},
            ProfileTitle: {},
            ProfileSubtitle: {},
            ProfileBody: {}
          },
        },
      },
    }}
  />
);