Dropdown

A component that is initially hidden and revealed upon user interaction either through a click or hover event. Dropdown components typically display lists of possible actions or navigation.

npm version

npm install @vrembem/dropdown
@import "@vrembem/dropdown/index";

dropdown

<div class="dropdown">
  <button class="dropdown__trigger button button_color_primary">Dropdown</button>
  <ul class="dropdown__menu">
    <li class="dropdown__item">
      <div class="dropdown__content">
        <h2 class="dropdown__title">Dropdown Title</h2>
        <p>This is some content for a dropdown...</p>
      </div>
    </li>
    <li class="dropdown__sep"></li>
    <li class="dropdown__item">
      <a href="#" class="dropdown__link">Dropdown Item</a>
    </li>
    <li class="dropdown__item">
      <a href="#" class="dropdown__link is-active">Dropdown Item</a>
    </li>
    <li class="dropdown__item">
      <a href="#" class="dropdown__link">Dropdown Item</a>
    </li>
    <li class="dropdown__sep"></li>
    <li class="dropdown__item">
      <a href="#" class="dropdown__link is-disabled">Dropdown Item</a>
    </li>
    <li class="dropdown__item">
      <a href="#" class="dropdown__link">Dropdown Item</a>
    </li>
  </ul>
</div>

dropdown_pos_[key]

<div class="dropdown dropdown_pos_down-left">...</div>
<div class="dropdown dropdown_pos_down">...</div>
<div class="dropdown dropdown_pos_down-right">...</div>
<div class="dropdown dropdown_pos_up-left">...</div>
<div class="dropdown dropdown_pos_up">...</div>
<div class="dropdown dropdown_pos_up-right">...</div>
<div class="dropdown dropdown_pos_left-up">...</div>
<div class="dropdown dropdown_pos_left">...</div>
<div class="dropdown dropdown_pos_left-down">...</div>
<div class="dropdown dropdown_pos_right-up">...</div>
<div class="dropdown dropdown_pos_right">...</div>
<div class="dropdown dropdown_pos_right-down">...</div>