Dropdown

Pure CSS interactive component for discoverable content.

Basic

Click Me 
<details class="dropdown">
  <summary class="btn dropdown__toggle">Click Me</summary>
  <div class="dropdown__content">
    <nav class="list list--inset list--borderless">
      <a role="button" class="list__link">Item #1</a>
      <a role="button" class="list__link">Item #2</a>
      <a role="button" class="list__link">Item #3</a>
      <a role="button" class="list__link">Item #4</a>
    </nav>
  </div>
</details>

Position

Use modifier classes below on .dropdown container to change the content position

  • .dropdown--tl
  • .dropdown--tr
  • .dropdown--rt
  • .dropdown--rb
  • .dropdown--bl
  • .dropdown--br
  • .dropdown--lt
  • .dropdown--lb
Click Me
Click Me
Click Me 
<details class="dropdown dropdown--tl">
  ...
</details>

<details class="dropdown dropdown--rt">
  ...
</details>

<details class="dropdown dropdown--bl">
  ...
</details>

<details class="dropdown dropdown--lt">
  ...
</details>