Search/

Menu

Last modified:

Provides full keyboard support for navigating a dropdown menu.

React documentation

Last modified:

Example of BcMenu default

BcMenuPanel

The BcMenuPanel component is by default not portalled to document.body.

If you are experiencing the issue where a parent element has overflow: hidden CSS property set and hence clipping the BcMenuPanel, then set floatingPortalId={document.body}.

Should you need to place the BcMenuPanel into a different element, you can do so by passing the unique id of that element or a RefObject to the floatingPortalId props.

HTML

Last modified:

  • Uses <button /> to toggle dropdown menu.
  • Uses div with role='Menu' to represent menu panel.
  • Uses <hr /> with role='separator' to represent horizontal item separator.

Design

Last modified:

The following variants are available:

VariantPurpose
.bc-menu__panel-containerContainer class used for panel wrapper
.bc-menu__panelRepresents div which acts as a panel element
.bc-menu__arrow-svgUsed to show connecting arrow icon between button and panel
.bc-panel__mainRepresents parent div which holds all menu items
.bc-menu__item-wrapper--separatorModifier class used for horizontal separator hr

Accessibility

Last modified:

Target button for menu contains following aria attributes:

  • aria-haspopup='menu': Indicates the availability and type of interactive popup element that can be triggered by button.
  • aria-owns={panelId}: Identifies panel by it’s id in order to define relationship between button and panel div.
  • aria-controls={panelId}: Identifies the panel by it’s id whose contents or presence is controlled by button.
  • aria-expanded='true/false': Indicate if a control is expanded or collapsed, and whether or not menu panel is displayed or hidden.

Rationale

Last modified:

Menu component provides full keyboard support for navigating a dropdown menu. If you want to create a menu where you can use the arrow keys or type the first character of the text content of a menu item to navigate to that item, then use this component. This component departs from the composition pattern so that it can manage the child indexes efficiently.

See also

Last modified:

  • Buttons (Component)