Dropdown

Basic Usage

Set the trigger button with dropdown-toggle to show/hide the dropdown menu specified by class dropdown-menu.

Other Variants

Menu Alignment

Dropdown menu is aligned to the left edge of the trigger button by default. It also can be set to align right by adding class dropdown-menu-right.

Icon

Add a prepend icon to dropwdown button with btn-icon class and icon component.

Headers

Add list header class to an li item to define section actions. h6 with with class dropdown-header, dropdown header should always be in LEAP secondary colour.

Dividers

Dropdown divider dropdown-divider can be used to separate a long menu list into groups for better scanning.

States

Active

Add .active to a <li> in the dropdown to show the current active state.

Disabled

Add .disabled to a <li> in the dropdown to disable the link.