Dropdown Menu

Dropdowns are used to group actions and options for making selections. A dropdown can take the form of a select, button or an icon (ex. More Icon, Arrow).

View Demo
Design
HTML

CSS Classes:

1. .dropdown-button

  • Styles the button which triggers the dropdown menu. Additional button styles can be appended to this for styling purposes. Optionally, dropdown-button can be an <a>.

2. .expanded

  • Append expanded class to dropdown-button when dropdown is open.

3. .dropdown-menu

  • Styles the dropdown element. By default the dropdown is hidden with a display: none. To display the dropdown, add the following inline styles: display: block, left and top positions.

4. .dropdown-menu-item

  • Styles the dropdown list item.

 JS

1. [bc-dropdown]

  • The attribute for the dropdown component. Add this to the wrapping element to create a dropdown component.

2. [bc-dropdown-toggle]

  • This attribute marks the trigger for the dropdown menu.

3. [bc-dropdown-menu]

  • The component which is shown/hidden when its sibling bc-dropdown-toggle is clicked.