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
divwithrole='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’sidin order to define relationship betweenbuttonand paneldiv.aria-controls={panelId}: Identifies the panel by it’sidwhose 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)