Component size, gzipped: 32kb

Menu

API

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

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten
  • Item Eleven
  • Item Twelve
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten
  • Item Eleven
  • Item Twelve
  • 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

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten
  • Item Eleven
  • Item Twelve
  • New File
  • New Window
  • Open...
  • Open Workspace...
  • Add Folder to Workspace...
  • Save
  • Save As...
  • Toggle Breakpoint
  • Close Folder
  • Close Window
  • Black
  • Blueish
  • AliceBlue
  • Aqua
  • Aquamarine
  • Whiteish
  • AntiqueWhite
  • Azure
  • Beige

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:

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

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

API

NameTypeDescription
items
array
Array of items in the menu.
onItemSelect
function
Callback executed on menu item clicks.
overrides
custom
Lets you customize all aspects of the component.

You can import this module like so:

import {StatefulMenu} from 'baseui/menu'

It exports the following components or utility functions: