Dropdowns

Toggleable, contextual menu for displaying lists of links.

Default Action Another action Something else here Separated link Primary Action Another action Something else here Separated link
<btn-group>
 <btn toggle="menu">Default <caret /></btn>
 <menu>
  <menu-item value="action">Action</menu-item>
  <menu-item value="another">Another action</menu-item>
  <menu-item value="something">Something else here</menu-item>
  <menu-item value="separated">Separated link</menu-item>
 </menu>
</btn-group>

Headers

Add a header to label sections of actions in any dropdown menu.

Default Dropdown header Action Another action Something else here Dropdown header Separated link Primary Dropdown header Action Another action Something else here Dropdown header Separated link
<btn-group>
 <btn toggle="menu">Default <caret /></btn>
 <menu>
  <menu-header>Dropdown header</menu-header>
  <menu-item value="action">Action</menu-item>
  ...
 </menu>
</btn-group>

Divider

Add a divider to separate series of links in a dropdown menu.

Default Action Another action Something else here Separated link Primary Action Another action Something else here Separated link
<btn-group>
 <btn toggle="menu">Default <caret /></btn>
 <menu>
  ...
  <menu-divider></menu-divider>
  ...
 </menu>
</btn-group>

Split button dropdowns

Default Action Another action Something else here Separated link Primary Action Another action Something else here Separated link
<btn-group>
 <btn>Default</btn>
 <btn toggle="menu"><caret /></btn>
 <menu>
  ...
 </menu>
</btn-group>