Activator Components

Dropdowns

A toggle component with “click away” to dismiss.

<button
  aria-controls="dropdown-1"
  aria-expanded="false"
  data-control="toggle"
  data-click-away="true"
  class="dropdown-control btn btn-primary"
>Click me ▾</button>
<div id="dropdown-1" class="dropdown-panel bs b-thin rounded-sm p-block bg-color-background">
  Dropdown content
</div>

For a right-aligned dropdown:

Notes:

The control (button) needs to be within a layout system that pushes it to the right – e.g. having it as the final item a menubar, or simply by wrapping it with <div class="flex flex-end">.
Right-aligned dropdowns need another wrapper with .relative (or CSS position: relative;) because the panel alignment will need to be set using .absolute (or CSS position: absolute;) that is relative to its containing element.
Add .absolute.right to the dropdown panel.
Right aligned dropdown panels, being within a .relative wrapper, will naturally have their width constrained to the width of the control (button). To break out of that, set the panel width to be whatever you require for your design. (In this example, I have used an inline style style="12em".)

<div class="flex flex-end">
  <div class="relative">
    <button
      aria-controls="dropdown-2"
      aria-expanded="false"
      data-control="toggle"
      data-click-away="true"
      class="dropdown-control btn btn-primary"
    >Click me ▾</button>
    <div id="dropdown-2" style="width: 12em;" class="dropdown-panel absolute right bs b-thin rounded-sm p-block bg-color-background">
      Dropdown content
    </div>
  </div>
</div>

Documentation