Bugcrowd Design System

Bugcrowd Design System

Search/

BcFilterMenu

Last modified:

Use BcFilterMenu to show form controls inside a dropdown panel.

Back to top

React documentation

Last modified:

HTML

Last modified:

The filter menu is React component and relies heavily on JavaScript to position the menu panel relative to the menu trigger. There is no plain HTML version of this component.

The markup requires:

  • an interactive trigger (a <button>)
  • ARIA notations to associate the button with its spawning panel
  • ARIA notations to explain what the button does and what the spawning panel is.

These are provided out-of-the-box by BcFilterMenu.

In the future we may investigate improving the native interactivity of the panel using a <details> with an custom role.

Refer to the React documentation for more information.

Design

Last modified:

The filter menu will look differently on desktop and mobile. This is an intentional decision to make it more user friendly when using the menu on a mobile device.

When in desktop, the filter menu will appear as a typical dropdown below the button. However, in mobile, it will slide from the bottom of the screen, and uses most of the screen space.

However, this doesn’t imply that the filter menu should be used as a slide-in container from the bottom on mobile devices without careful consideration.

The filter menu is designed to be flexible, so developers should carefully layout its content area by using one filter category per menu.

Accessibility

Last modified:

The trigger 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 its 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.

Rationale

Last modified:

The filter menu offers an out-of-the-box solution for developers to easily add form controls to a dropdown, without worrying about styling or accessibility.

Developers should focus on:

  • what form controls go inside the panel
  • data flow and state of the form

The filter menu handles user interface aspects like focus trapping, focus restoration, positioning, and keyboard navigation.

The filter menu and menu serve different purposes and functionality:

BcMenuBcFilterMenu
UsageAction menuQuick filters
ChildrenThe trigger element.
The only children for a BcMenu is the trigger element. The options to render in the panel are passed as props.		Any JSXElement
The BcFilterMenu component allows you to compose the content the panel as well as customising the menu trigger. However, the trigger needs to be a button or BcButton.
Keyboard supportBcMenuBcFilterMenu
Esc1✅✅
Tab✅✅
Arrows2✅partial
Character3✅❌

Footnotes

  1. Use esc key to close the dropdown panel and restore focus back to the trigger ↩

  2. Arrow support is fully baked into BcMenu. However, the BcFilterMenu will arrow keys support only extends to what the native form control behaviour is. E.g: in a radio button group, arrow keys will navigate and select the item. ↩

  3. When the dropdown of a BcMenu is open, it fully supports typing the starting characters of an option’s label to bring that option into focus. ↩

See also

Last modified: