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.

• 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.

The following variants are available:

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.

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.

• Button documentation
• Filter menu documentation
• Popover API