Edit this page
[?] Component size, gzipped: 115kb

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

  • 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

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

activedescendantId nullable string

Id of the highlighted menu item.

getRequiredItemProps function

Function to get props for each rendered item. This will have some defaults needed for keyboard bindings to work properly. Every rendered item should call this.

function
*,
number
=>
disabled boolean
ref React$ElementRef*
id nullable string
isFocused boolean
isHighlighted boolean
resetMenu function () => mixed

highlightedIndex number

Index of highlighted menu item.

items $ReadOnlyArray<*> required

List of menu items.

$ReadOnlyArray*

noResultsMsg Node

Message to be displayed if no menu items are passed in.

Node

onBlur function

SyntheticFocusEventHTMLElement => mixed

onFocus function

SyntheticFocusEventHTMLElement => mixed

rootRef React$ElementRef<*>

Ref for the menu container element. Used to capture key events for navigation

React$ElementRef*

focusMenu function

One of
FocusEvent,
MouseEvent,
KeyboardEvent
 => mixed

unfocusMenu function

() => mixed

overrides object

EmptyState { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
List { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Option { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

Stateful Menu API

items $ReadOnlyArray<*> required

List of menu items.

$ReadOnlyArray*

initialState object

Initial state of the stateful menu.

activedescendantId nullable string
highlightedIndex number
isFocused boolean

stateReducer function

State reducer to intercept state changes and return new internal state

function
$Keys{ click: "click", moveUp: "moveUp", moveDown: "moveDown", mouseEnter: "mouseEnter", focus: "focus", reset: "reset" },
activedescendantId nullable string
highlightedIndex number required
isFocused boolean required
,
activedescendantId nullable string
highlightedIndex number required
isFocused boolean required
=>
activedescendantId nullable string
highlightedIndex number required
isFocused boolean required

getRequiredItemProps function

Function to get props for each rendered item. This will have some defaults needed for keyboard bindings to work properly. Every rendered item should call this.

function
*,
number
=>
disabled boolean
ref React$ElementRef*
id nullable string
isFocused boolean
isHighlighted boolean
resetMenu function () => mixed

onItemSelect function

Callback executed on menu item clicks.

item required *
event union One of
SyntheticEventHTMLElement,
KeyboardEvent
 => mixed

rootRef React$ElementRef<*>

Ref for the menu container element. Used to capture key events for navigation

React$ElementRef*

children function

Child as function pattern.

activedescendantId nullable string
highlightedIndex number required
isFocused boolean required
&
items required $ReadOnlyArray*
getRequiredItemProps required function
*,
number
=>
disabled boolean
ref React$ElementRef*
id nullable string
isFocused boolean
isHighlighted boolean
resetMenu function () => mixed
 => Node

addMenuToNesting function

current union required One of
HTMLElement,
null
 => undefined

removeMenuFromNesting function

current union required One of
HTMLElement,
null
 => undefined

getParentMenu function

current union required One of
HTMLElement,
null
 =>
current union required One of
HTMLElement,
null

getChildMenu function

current union required One of
HTMLElement,
null
 =>
current union required One of
HTMLElement,
null

overrides object

EmptyState { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
List { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Option { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

Stateful Container API

items $ReadOnlyArray<*> required

List of menu items.

$ReadOnlyArray*

initialState object = { highlightedIndex: -1, isFocused: false, activedescendantId: null }

Initial state of the stateful menu.

activedescendantId nullable string
highlightedIndex number
isFocused boolean

stateReducer function = (changeType, changes) => undefined

State reducer to intercept state changes and return new internal state

function
$Keys{ click: "click", moveUp: "moveUp", moveDown: "moveDown", mouseEnter: "mouseEnter", focus: "focus", reset: "reset" },
activedescendantId nullable string
highlightedIndex number required
isFocused boolean required
,
activedescendantId nullable string
highlightedIndex number required
isFocused boolean required
=>
activedescendantId nullable string
highlightedIndex number required
isFocused boolean required

getRequiredItemProps function = () => undefined

Function to get props for each rendered item. This will have some defaults needed for keyboard bindings to work properly. Every rendered item should call this.

function
*,
number
=>
disabled boolean
ref React$ElementRef*
id nullable string
isFocused boolean
isHighlighted boolean
resetMenu function () => mixed

onItemSelect function = () => undefined

Callback executed on menu item clicks.

item required *
event union One of
SyntheticEventHTMLElement,
KeyboardEvent
 => mixed

rootRef React$ElementRef<*>

Ref for the menu container element. Used to capture key events for navigation

React$ElementRef*

children function = () => undefined

Child as function pattern.

activedescendantId nullable string
highlightedIndex number required
isFocused boolean required
&
items required $ReadOnlyArray*
getRequiredItemProps required function
*,
number
=>
disabled boolean
ref React$ElementRef*
id nullable string
isFocused boolean
isHighlighted boolean
resetMenu function () => mixed
 => Node

addMenuToNesting function = () => undefined

current union required One of
HTMLElement,
null
 => undefined

removeMenuFromNesting function = () => undefined

current union required One of
HTMLElement,
null
 => undefined

getParentMenu function = () => undefined

current union required One of
HTMLElement,
null
 =>
current union required One of
HTMLElement,
null

getChildMenu function = () => undefined

current union required One of
HTMLElement,
null
 =>
current union required One of
HTMLElement,
null

Profile Menu Item Api

item * required

Item to parse and render.

*

getChildMenu function

Used to render a sub menu at this menu item. You'll often render another menu from this function.

* => Node

getProfileItemLabels function required

Returns an object consisting of title, subtitle, and body to render menu item

* =>
title string
subtitle string
body string

getProfileItemImg function required

Returns either an image source url, or a full React component to render as the image.

* => One of
string,
ComponentType*

getProfileItemImgText function required

Returns the alt text for the image

* => string

overrides object

ListItemProfile { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ProfileImgContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ProfileImg { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ProfileLabelsContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ProfileTitle { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ProfileSubtitle { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ProfileBody { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

resetMenu function

Utility to reset menu to default state. Useful for rendering child menus.

() => undefined

$isHighlighted boolean

Renders UI in 'highlighted' state.

You can import this module like so:

import {StatefulMenu} from 'baseui/menu'

It exports the following components or utility functions:

  • StatefulMenu
  • StatefulContainer
  • OptionList
  • OptionProfile
  • Menu
  • NestedMenus
  • KEY_STRINGS
  • STATE_CHANGE_TYPES
  • StyledList
  • StyledListItem
  • StyledListItemProfile
  • StyledProfileImgContainer
  • StyledProfileImg
  • StyledProfileLabelsContainer
  • StyledProfileTitle
  • StyledProfileSubtitle
  • StyledProfileBody