React documentation
Last modified:
Example of BcMenu default
BcMenu Props
Name | Type | Default value | Description |
---|---|---|---|
children | (ReactNode | ReactNode[]) & ReactNode | The `children` props should preferably be a `BcMenu.Button`. This will allow you to pass props to the `BcMenu.Button` | |
className | string | `className` will get appended to the `bc-menu` element | |
closeMenuOnSelect | boolean | ||
floatingPortalId | PanelProps[‘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>>] | ||
id | string | ||
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. | |
offsetOptions | OffsetOptions |
BcMenuPanel
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.
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)