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
withrole='Menu'
to represent menu panel. - Uses
<hr />
withrole='separator'
to represent horizontal item separator.
Design
Last modified:
The following variants are available:
Variant | Purpose |
---|---|
.bc-menu__panel-container | Container class used for panel wrapper |
.bc-menu__panel | Represents div which acts as a panel element |
.bc-menu__arrow-svg | Used to show connecting arrow icon between button and panel |
.bc-panel__main | Represents parent div which holds all menu items |
.bc-menu__item-wrapper--separator | Modifier 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 bybutton
.aria-owns={panelId}
: Identifies panel by it’sid
in order to define relationship betweenbutton
and paneldiv
.aria-controls={panelId}
: Identifies the panel by it’sid
whose contents or presence is controlled bybutton
.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)