드롭다운

드롭다운 (Dropdown)

dropdown 컴포넌트는 드롭다운 버튼과 드롭다운 메뉴를 담는 컨테이너입니다.

• dropdown: 메인 컨테이너
  • dropdown-trigger: button을 담는 컨테이너
  • dropdown-menu: 기본적으로 숨겨져 있는 토글 가능한 메뉴
    • dropdown-content: 흰 배경과 그림자가 있는 드롭다운 박스
      • dropdown-item: 각각의 드롭다운 항목. a 또는 div가 될 수 있어요
      • dropdown-divider: 드롭다운 항목을 구분하는 가로선

출처: 문서

본문

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item"> Dropdown item </a>
      <a class="dropdown-item"> Other dropdown item </a>
      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
      <a href="#" class="dropdown-item"> Other dropdown item </a>
      <hr class="dropdown-divider" />
      <a href="#" class="dropdown-item"> With a divider </a>
    </div>
  </div>
</div>

드롭다운 콘텐츠 (Dropdown content)

dropdown-item은 앵커 링크 <a>로 사용할 수 있지만, <div>를 사용해 거의 모든 유형의 콘텐츠를 넣을 수도 있어요. 예를 들어 dropdown-item 안에 div를 쓰면 드롭다운 메뉴 안에 어떤 콘텐츠든 넣을 수 있습니다.

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
      <span>Content</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu2" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>
          You can insert <strong>any type of content</strong> within the
          dropdown menu.
        </p>
      </div>
      <hr class="dropdown-divider" />
      <div class="dropdown-item">
        <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
      </div>
      <hr class="dropdown-divider" />
      <a href="#" class="dropdown-item"> This is a link </a>
    </div>
  </div>
</div>

Hoverable 또는 Toggable

dropdown 컴포넌트에는 2가지 추가 수식어가 있습니다:

• is-hoverable: dropdown-trigger에 마우스를 올리면 드롭다운이 나타납니다
• is-active: 항상 드롭다운이 표시됩니다

CSS :hover 구현은 완벽하게 동작하지만, JavaScript로 드롭다운의 표시를 제어하려는 사용자를 위해 is-active 클래스도 제공합니다.

<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
      <span>Hover me</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu4" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>
          You can insert <strong>any type of content</strong> within the
          dropdown menu.
        </p>
      </div>
    </div>
  </div>
</div>

오른쪽 정렬 (Right aligned)

is-right 수식어를 추가하면 오른쪽 정렬 드롭다운을 만들 수 있어요. 기본적으로 드롭다운은 왼쪽 정렬입니다.

<div class="dropdown is-right is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
      <span>Right aligned</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu6" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>
          Add the <code>is-right</code> modifier for a
          <strong>right-aligned</strong> dropdown.
        </p>
      </div>
    </div>
  </div>
</div>

드롭업 (Dropup)

is-up 수식어를 추가하면 드롭다운 버튼 위에 메뉴가 나타나는 드롭업(dropup)을 만들 수 있어요.

<div class="dropdown is-up">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
      <span>Dropup button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-up" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu7" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>
          You can add the <code>is-up</code> modifier to have a dropdown menu
          that appears above the dropdown button.
        </p>
      </div>
    </div>
  </div>
</div>

Sass 및 CSS 변수 (Sass and CSS variables)

더 알아보기 (Learn more)

• Menu 컴포넌트
• Modal 컴포넌트