Dropdowns « Components ⟸ Documentation

Duis a ultrices ante. Praesent suscipit porttitor dui ultricies auctor. Nunc pharetra nibh justo, vitae fermentum sapien malesuada et. Duis elementum arcu nec enim sagittis interdum. Praesent gravida lacinia ipsum, et rutrum felis posuere nec. Duis ipsum ipsum, consectetur in molestie non, dignissim eget ex. Maecenas ut fermentum libero. Mauris eu libero sollicitudin, pulvinar nunc id, facilisis odio.

<div class="dropdown">
  <button>...</button>
  <nav class="panel arrow">
    <ul>
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
    </ul>
  </nav>
</div>

Dropdown locations

Maecenas ut fermentum libero. Mauris eu libero sollicitudin, pulvinar nunc id, facilisis odio.

<div class="dropdown">
  <button>...</button>
  <nav class="panel arrow bottom right"></nav>
</div>

<div class="dropdown">
  <button>...</button>
  <nav class="panel arrow bottom center"></nav>
</div>

<div class="dropdown">
  <button>...</button>
  <nav class="panel arrow bottom left"></nav>
</div>

<div class="dropdown">
  <button>...</button>
  <nav class="panel arrow top right"></nav>
</div>

<div class="dropdown">
  <button>...</button>
  <nav class="panel arrow top center"></nav>
</div>

<div class="dropdown">
  <button>...</button>
  <nav class="panel arrow top left"></nav>
</div>

Dropdown links

<div class="dropdown">
  <a tabindex="...">...</a>
  <nav class="panel arrow"></nav>
</div>

<div class="dropdown">
  <a tabindex="..." class="knob">...</a>
  <nav class="panel arrow"></nav>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nemo modi fuga fugit, cumque voluptas cum animi dolore accusamus ducimus tenetur hic rem nostrum dolor, voluptatem commodi iusto amet perspiciatis?

<div class="dropdown">
  <nav class="panel arrow">
    <ul class="checkboxes">...</ul>
  </nav>
</div>

<div class="dropdown">
  <nav class="panel arrow">
    <ul class="radios">...</ul>
  </nav>
</div>