Dropdowns

Basic use for Dropdowns with a few classes.

Variables

Name Type Value
$dropdown-menu-border unitless $border-base
$dropdown-item-padding padding .3125rem 1rem
$dropdown-menu-top unitless 1.625rem + .75rem + .125rem
$drop-dow-open-shadow unitless 0 0 0 $outline-width darken($gray-200, 20%)
$triangle-width width 5px
$triangle-transition unitless transform .1s ease-in-out
$drop-menu-min-width min-width 12.5rem
$drop-menu-padding padding .5rem 0
$drop-menu-radius radius $radius
$drop-menu-color color $text-color
$drop-menu-background color $white
$drop-menu-transition unitless color $speed ease-in-out, background-color $speed ease-in-out
$drop-active-color color $text-color
$drop-active-background color $gray-200
$separator-color color $border-color

Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive without JavaSctipt, instead, is used the radio button with :checked pseudo class to display the toggleable list.

<div class="dropdown">
  <input type="checkbox" id="drop-1-down">
  <label class="button toggle" for="drop-1-down">
    Dropdown button
  </label>
  <nav class="drop-menu">
    <a href="#">Lorem ipsum dolor</a>
    <a href="#" class="drop-active">Pellentesque nibh</a>
    <a href="#">Maecenas at dapibus</a>
    <hr class="drop-separator">
    <a href="#">Quisque eleifend</a>
  </nav>
</div>

Changing classes with JS.

<div class="dropdown">
  <button class="toggle">
    Dropdown button
  </button>
  <nav class="drop-menu">
    <a href="#">Lorem ipsum dolor</a>
    <a href="#" class="drop-active">Pellentesque nibh</a>
    <a href="#">Maecenas at dapibus</a>
    <hr class="drop-separator">
    <a href="#">Quisque eleifend</a>
  </nav>
</div>
<div class="dropdown">
  <input type="checkbox" id="drop-1-1-down">
  <label class="button toggle" for="drop-1-1-down">
    Dropdown button
  </label>
  <nav class="drop-menu">
    <a href="#">Lorem ipsum dolor</a>
    <a href="#">Pellentesque nibh</a>
    <a href="#">Maecenas at dapibus</a>
    <hr class="drop-separator">
    <a href="#">Quisque eleifend</a>
    <hr class="drop-separator">
    <div class="drop-item">
      <p>You can insert <strong>any type of content</strong></p>
    </div>
  </nav>
</div>

Dropup

<div class="dropup">
  <input type="checkbox" id="drop-1-top">
  <label class="button toggle" for="drop-1-top">
    Dropup button
  </label>
  <nav class="drop-menu">
    <a href="#">Lorem ipsum dolor</a>
    <a href="#">Pellentesque nibh</a>
    <a href="#">Maecenas at dapibus</a>
  </nav>
</div>

Dropright

<div class="dropright">
  <input type="checkbox" id="drop-1-right">
  <label class="button toggle" for="drop-1-right">
    Dropright button
  </label>
  <nav class="drop-menu">
    <a href="#">Lorem ipsum dolor</a>
    <a href="#">Pellentesque nibh</a>
    <a href="#">Maecenas at dapibus</a>
  </nav>
</div>

Dropleft

<div class="dropleft">
  <input type="checkbox" id="drop-1-left">
  <label class="button toggle" for="drop-1-left">
    Dropleft button
  </label>
  <nav class="drop-menu">
    <a href="#">Lorem ipsum dolor</a>
    <a href="#">Pellentesque nibh</a>
    <a href="#">Maecenas at dapibus</a>
  </nav>
</div>