Dropdowns

Codebase dropdowns are simple activator components.

On this page:

Note: Codebase dropdowns automatically include their own triangular carets. So, you do not need to add a caret using the caret classes.

Dropup content

<div class="dropdown">
  <button class="dropdown-ctrl btn btn-sm">Dropdown</button>
  <div class="dropdown-content">Dropdown content</div>
</div>

<div class="dropup">
  <div class="dropup-content">Dropup content</div>
  <button class="dropup-ctrl btn btn-sm">Dropup</button>
</div>

For "dropup", you need to use the .dropup classes throughout – and you need to reverse the order of the controller and content elements.

With a modifier class on the .dropdown-content or .dropup-content, the dropdown content can be aligned flush-left, above or flush-right (relative to the dropdown control).

.dropdown-content.dropdown-content-left

.dropdown-content.dropdown-content-right

.dropup-content.dropup-content-left

Dropup content left

.dropup-content.dropup-content-right

Dropup content right

Class	Notes	Modifiers
`.dropdown` or `.dropup`	The dropdown (or dropup) component block
`.dropdown-ctrl` or `.dropup-ctrl`	The controller element
`.dropdown-content` or `.dropup-content`	The content element	`.dropdown-content-left`, `.dropdown-content-right`, or `.dropup-content-left`, `.dropup-content-right`
`.caret-down` `.caret-up`	(Optional) indicative carets¹

¹ Instead of Codebase carets, you could also use something from an icon font or create your own graphic element.

Showhide

Buttons

Dropdowns

The Simplest Dropdown

Alignment of Dropdown Content

Dropdown Classes