Last modified:

Provides full keyboard support for navigating a dropdown menu.

React documentation

Last modified:

Example of BcMenu default

BcMenu Props

NameTypeDefault valueDescription
children(ReactNode | ReactNode[]) & ReactNodeThe `children` props should preferably be a `BcMenu.Button`. This will allow you to pass props to the `BcMenu.Button`
classNamestring`className` will get appended to the `bc-menu` element
floatingPortalIdPanelProps[‘floatingPortalId’]Optionally selects the node with the id if it exists, or create it and append it to the specified root (by default document.body).
floatingConfig[options?: Partial<UseFloatingOptions<ReferenceType>>]
items (required)BcMenuItem[]An array of configuration object. The array gets mapped and renders element based on the `el` props of the item. By using an array of config objects, the indexing of the items and their text content can be done more efficiently.


The BcMenuPanel component is by default portalled to document.body to overcome the issue where a parent element has overflow: hidden CSS property set. This will cause the BcMenuPanel to be clipped.

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


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.


Last modified:

The following variants are available:

.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


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.


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)