드롭다운

드롭다운 (Dropdowns)

Bootstrap 드롭다운 플러그인으로 링크 목록 등을 표시하는 맥락적 오버레이를 토글합니다.

출처: 문서

본문

개요 (Overview)

드롭다운은 링크 목록 등을 표시하기 위한 토글 가능하고 맥락적인 오버레이입니다. 포함된 Bootstrap 드롭다운 JavaScript 플러그인으로 상호작용하게 만들 수 있습니다. hover가 아니라 클릭으로 토글됩니다—이것은 의도적인 설계 결정입니다.

드롭다운은 동적 위치 지정과 뷰포트 감지를 제공하는 제3자 라이브러리인 Popper를 기반으로 합니다. Bootstrap의 JavaScript 앞에 popper.min.js를 포함하거나, Popper를 담고 있는 bootstrap.bundle.min.js / bootstrap.bundle.js를 사용하세요. 단, navbar에서는 동적 위치 지정이 필요 없으므로 Popper를 사용해 드롭다운을 배치하지 않습니다.

접근성 (Accessibility)

WAI ARIA 표준은 실제 role="menu" 위젯을 정의하지만, 이것은 동작이나 기능을 트리거하는 애플리케이션 같은 메뉴에 특화된 것입니다. ARIA 메뉴는 메뉴 아이템, 체크박스 메뉴 아이템, 라디오 버튼 메뉴 아이템, 라디오 버튼 그룹, 서브 메뉴만 포함할 수 있습니다.

반면 Bootstrap의 드롭다운은 다양한 상황과 마크업 구조에 적용될 수 있도록 범용적으로 설계되었습니다. 예를 들어 검색 필드나 로그인 폼 같은 추가 입력과 폼 컨트롤을 포함하는 드롭다운을 만들 수 있습니다. 이런 이유로 Bootstrap은 진짜 ARIA 메뉴에 필요한 role과 aria-* 속성 중 어느 것도 기대하지 않으며 자동으로 추가하지도 않습니다. 작성자가 이런 더 구체적인 속성을 직접 포함해야 합니다.

하지만 Bootstrap은 커서 키로 개별 .dropdown-item 요소를 이동하고 Esc 키로 메뉴를 닫는 기능 같은 대부분의 표준 키보드 메뉴 상호작용에 대한 내장 지원을 추가합니다.

예제 (Examples)

드롭다운의 토글(버튼이나 링크)과 드롭다운 메뉴를 .dropdown, 또는 position: relative;를 선언하는 다른 요소 안에 감싸세요. 이상적으로 드롭다운 트리거에는 <button> 요소를 사용해야 하지만, 플러그인은 <a> 요소에서도 작동합니다. 여기 예시들은 적절한 곳에서 의미론적 <ul> 요소를 사용하지만, 커스텀 마크업도 지원됩니다.

단일 버튼 (Single button)

마크업 몇 가지를 바꾸면 어떤 단일 .btn이라도 드롭다운 토글로 바꿀 수 있습니다. <button> 요소에서 사용하는 방법은 다음과 같습니다:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

드롭다운 토글에는 <button>이 권장 컨트롤이지만, <a> 요소를 사용해야 하는 상황이 있을 수 있습니다. 그럴 경우 컨트롤의 목적을 스크린 리더 같은 보조 기술에 적절히 전달하도록 role="button" 속성을 추가할 것을 권장합니다.

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

가장 좋은 점은 어떤 버튼 변형에서든 이렇게 할 수 있다는 것입니다:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Danger
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

스플릿 버튼 (Split button)

마찬가지로, 단일 버튼 드롭다운과 거의 동일한 마크업으로 스플릿 버튼 드롭다운을 만들 수 있지만, 드롭다운 캐럿(caret) 주변에 올바른 간격을 위해 .dropdown-toggle-split이 추가됩니다.

이 추가 클래스는 캐럿 양쪽의 가로 패딩을 25% 줄이고, 일반 버튼 드롭다운에 추가되는 margin-left를 제거합니다. 이런 추가 변경으로 캐럿이 스플릿 버튼 중앙에 유지되고, 메인 버튼 옆에 더 적절한 크기의 히트 영역이 제공됩니다.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

크기 조정 (Sizing)

버튼 드롭다운은 기본 및 스플릿 드롭다운 버튼을 포함한 모든 크기의 버튼에서 작동합니다.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

다크 드롭다운 (Dark dropdowns) — v5.3.0에서 폐기

기존 .dropdown-menu에 .dropdown-menu-dark를 추가해 어두운 navbar나 커스텀 스타일에 맞는 더 어두운 드롭다운을 선택하세요. 드롭다운 아이템에는 변경이 필요 없습니다.

주의! 컴포넌트의 다크 변형은 색상 모드 도입과 함께 v5.3.0에서 폐기되었습니다. .dropdown-menu-dark를 추가하는 대신 루트 요소, 부모 래퍼, 또는 컴포넌트 자체에 data-bs-theme="dark"를 설정하세요.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

그리고 navbar에서 사용해 보세요:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </button>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

방향 (Directions)

방향은 RTL 모드에서 반전됩니다. 따라서 .dropstart는 오른쪽에 나타납니다.

가운데 정렬 (Centered)

부모 요소에 .dropdown-center를 사용해 토글 아래 중앙에 드롭다운 메뉴를 만드세요.

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

드롭업 (Dropup)

부모 요소에 .dropup을 추가해 요소 위에 드롭다운 메뉴를 트리거하세요.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

가운데 드롭업 (Dropup centered)

부모 요소에 .dropup-center를 사용해 토글 위 중앙에 드롭업 메뉴를 만드세요.

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

드롭엔드 (Dropend)

부모 요소에 .dropend를 추가해 요소 오른쪽에 드롭다운 메뉴를 트리거하세요.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

드롭스타트 (Dropstart)

부모 요소에 .dropstart를 추가해 요소 왼쪽에 드롭다운 메뉴를 트리거하세요.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

드롭다운 아이템으로 <a> 또는 <button> 요소를 사용할 수 있습니다.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

.dropdown-item-text로 비-대화형 드롭다운 아이템을 만들 수도 있습니다. 커스텀 CSS나 텍스트 유틸리티로 자유롭게 더 스타일링하세요.

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

활성 (Active)

드롭다운의 아이템에 .active를 추가해 활성으로 스타일링하세요. 보조 기술에 활성 상태를 전달하려면 aria-current 속성을 사용하세요—현재 페이지에는 page 값을, 집합의 현재 아이템에는 true를 사용합니다.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

비활성 (Disabled)

드롭다운의 아이템에 .disabled를 추가해 비활성으로 스타일링하세요.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

기본적으로 드롭다운 메뉴는 부모의 위쪽에서 100%, 왼쪽을 따라 자동으로 배치됩니다. 방향성 .drop* 클래스로 변경할 수 있지만, 추가 변형 클래스로도 제어할 수 있습니다.

.dropdown-menu에 .dropdown-menu-end를 추가해 드롭다운 메뉴를 오른쪽 정렬하세요. Bootstrap을 RTL로 사용하면 방향이 반전되어 .dropdown-menu-end가 왼쪽에 나타납니다.

주의! 드롭다운은 navbar 안에 포함될 때를 제외하고 Popper 덕분에 배치됩니다.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

반응형 정렬 (Responsive alignment)

반응형 정렬을 사용하려면 data-bs-display="static" 속성을 추가해 동적 위치 지정을 비활성화하고 반응형 변형 클래스를 사용하세요.

주어진 브레이크포인트 이상에서 드롭다운 메뉴를 오른쪽 정렬하려면 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end를 추가하세요.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

주어진 브레이크포인트 이상에서 드롭다운 메뉴를 왼쪽 정렬하려면 .dropdown-menu-end와 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start를 추가하세요.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

navbar 에서는 Popper를 사용하지 않으므로 드롭다운 버튼에 data-bs-display="static" 속성을 추가할 필요가 없다는 점을 유의하세요.

정렬 옵션 (Alignment options)

위에 보여준 대부분의 옵션을 가져와, 다양한 드롭다운 정렬 옵션의 작은 키친 싱크 데모를 한 곳에 모았습니다.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

헤더 (Headers)

어떤 드롭다운 메뉴에서든 동작 섹션에 라벨을 붙이도록 헤더를 추가하세요.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

구분선 (Dividers)

구분선으로 관련 메뉴 아이템 그룹을 분리하세요.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

텍스트 (Text)

드롭다운 메뉴 안에 자유 형식 텍스트를 배치하고 간격 유틸리티를 사용하세요. 메뉴 너비를 제한하려면 추가 크기 스타일이 필요할 것입니다.

<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
  <p>
    Some example text that’s free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

폼 (Forms)

드롭다운 메뉴 안에 폼을 넣거나, 드롭다운 메뉴 자체를 폼으로 만들고, 필요한 음수 공간을 위해 마진이나 패딩 유틸리티를 사용하세요.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

드롭다운의 위치를 바꾸려면 data-bs-offset 또는 data-bs-reference를 사용하세요.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

자동 닫기 동작 (Auto close behavior)

기본적으로 드롭다운 메뉴는 드롭다운 메뉴 안이나 바깥을 클릭하면 닫힙니다. autoClose 옵션을 사용해 드롭다운의 이 동작을 바꿀 수 있습니다.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

변수 (Variables) — v5.2.0에서 추가

Bootstrap의 진화하는 CSS 변수 접근 방식에 따라, 드롭다운은 이제 .dropdown-menu에 로컬 CSS 변수를 사용해 실시간 커스터마이징을 강화합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 커스터마이징도 여전히 지원됩니다.

--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

드롭다운 아이템에는 .dropdown에 설정되지 않은 변수가 적어도 하나 포함됩니다. 이렇게 하면 Bootstrap이 폴백 값을 기본으로 사용하는 동안 새 값을 제공할 수 있습니다.

--bs-dropdown-item-border-radius

CSS 변수 커스터마이징은 .dropdown-menu-dark 클래스에서 볼 수 있는데, 중복 CSS 셀렉터를 추가하지 않고 특정 값을 덮어씁니다.

--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass 변수 (Sass variables)

모든 드롭다운에 대한 변수:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    var(--#{$prefix}body-color);
$dropdown-bg:                       var(--#{$prefix}body-bg);
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            var(--#{$prefix}border-radius);
$dropdown-border-width:             var(--#{$prefix}border-width);
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               var(--#{$prefix}box-shadow);

$dropdown-link-color:               var(--#{$prefix}body-color);
$dropdown-link-hover-color:         $dropdown-link-color;
$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg);

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color);

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

다크 드롭다운에 대한 변수:

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

드롭다운의 상호작용성을 나타내는 CSS 기반 캐럿에 대한 변수:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Sass 믹스인 (Sass mixins)

믹스인은 CSS 기반 캐럿을 생성하는 데 사용되며 scss/mixins/_caret.scss에서 찾을 수 있습니다.

@mixin caret-down($width: $caret-width) {
  border-top: $width solid;
  border-right: $width solid transparent;
  border-bottom: 0;
  border-left: $width solid transparent;
}

@mixin caret-up($width: $caret-width) {
  border-top: 0;
  border-right: $width solid transparent;
  border-bottom: $width solid;
  border-left: $width solid transparent;
}

@mixin caret-end($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: 0;
  border-bottom: $width solid transparent;
  border-left: $width solid;
}

@mixin caret-start($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: $width solid;
  border-bottom: $width solid transparent;
}

@mixin caret(
  $direction: down,
  $width: $caret-width,
  $spacing: $caret-spacing,
  $vertical-align: $caret-vertical-align
) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $spacing;
      vertical-align: $vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down($width);
      } @else if $direction == up {
        @include caret-up($width);
      } @else if $direction == end {
        @include caret-end($width);
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $spacing;
        vertical-align: $vertical-align;
        content: "";
        @include caret-start($width);
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

사용법 (Usage)

데이터 속성이나 JavaScript를 통해 드롭다운 플러그인은 부모 .dropdown-menu의 .show 클래스를 토글해 숨겨진 콘텐츠(드롭다운 메뉴)를 토글합니다. data-bs-toggle="dropdown" 속성은 애플리케이션 수준에서 드롭다운 메뉴를 닫는 데 의존되므로, 항상 사용하는 것이 좋습니다.

터치 지원 기기에서 드롭다운을 열면 <body> 요소의 직접 자식들에게 빈 mouseover 핸들러가 추가됩니다. 이 다소 지저분한 핵은 iOs의 이벤트 위임(딜리게이션)의 괴짜 동작을 우회하기 위해 필요한데, 그렇지 않으면 드롭다운 바깥의 어느 곳을 탭해도 드롭다운을 닫는 코드가 트리거되지 않습니다. 드롭다운이 닫히면 이 추가 빈 mouseover 핸들러들은 제거됩니다.

데이터 속성으로 (Via data attributes)

드롭다운을 토글하려면 링크나 버튼에 data-bs-toggle="dropdown"을 추가하세요.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

JavaScript로 (Via JavaScript)

드롭다운은 JavaScript로 호출하든 data-api를 사용하든 트리거 요소에 data-bs-toggle="dropdown"이 있어야 합니다.

JavaScript로 드롭다운을 호출하세요:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

옵션 (Options)

옵션은 데이터 속성이나 JavaScript로 전달할 수 있으므로 data-bs-animation="{value}"처럼 data-bs-에 옵션 이름을 붙일 수 있습니다. 데이터 속성으로 옵션을 전달할 때는 옵션 이름의 표기(camelCase)를 "kebab-case"로 바꿔야 합니다. 예를 들어 data-bs-customClass="beautifier" 대신 data-bs-custom-class="beautifier"를 사용하세요.

Bootstrap 5.2.0부터 모든 컴포넌트는 간단한 컴포넌트 설정을 JSON 문자열로 담을 수 있는 실험적 예약 데이터 속성 data-bs-config를 지원합니다. 요소에 data-bs-config='{"delay":0, "title":123}'과 data-bs-title="456" 속성이 있으면 최종 title 값은 456이 되고, 별도의 데이터 속성이 data-bs-config에 주어진 값을 덮어씁니다. 또한 기존 데이터 속성이 data-bs-delay='{"show":0,"hide":150}'처럼 JSON 값을 담을 수 있습니다.

최종 설정 객체는 data-bs-config, data-bs-, js 객체를 병합한 결과로, 가장 나중에 주어진 키-값이 다른 것들을 덮어씁니다.

이름	타입	기본값	설명
autoClose	boolean, string	true	드롭다운의 자동 닫기 동작을 설정합니다:
boundary	string, element	'clippingParents'	드롭다운 메뉴의 오버플로 제약 경계입니다 (Popper의 preventOverflow modifier에만 적용). 기본적으로 clippingParents이며 HTMLElement 참조를 받을 수 있습니다 (JavaScript로만). 자세한 내용은 Popper의 detectOverflow 문서를 참고하세요.
display	string	'dynamic'	기본적으로 동적 위치 지정을 위해 Popper를 사용합니다. `static`으로 이것을 비활성화하세요.
offset	array, string, function	[0, 2]	타깃에 대한 드롭다운의 오프셋입니다. 데이터 속성에 쉼표로 구분된 문자열을 전달할 수 있습니다: `data-bs-offset="10,20"`처럼. 오프셋을 결정하는 데 함수를 사용하면 popper placement, reference, popper rects를 담은 객체가 첫 번째 인자로 호출됩니다. 트리거링 요소 DOM 노드가 두 번째 인자로 전달됩니다. 함수는 skidding, distance 두 숫자의 배열을 반환해야 합니다. 자세한 내용은 Popper의 offset 문서를 참고하세요.
popperConfig	null, object, function	null	Bootstrap의 기본 Popper 설정을 바꾸려면 Popper의 configuration을 참고하세요. Popper 설정을 만드는 데 함수를 쓰면 Bootstrap의 기본 Popper 설정을 담은 객체로 호출됩니다. 기본값을 자신의 설정과 사용·병합하는 데 도움이 됩니다. 함수는 Popper의 설정 객체를 반환해야 합니다.
reference	string, element, object	'toggle'	드롭다운 메뉴의 참조 요소입니다. 'toggle', 'parent', HTMLElement 참조 또는 getBoundingClientRect를 제공하는 객체의 값을 받습니다. 자세한 내용은 Popper의 constructor 문서와 virtual element 문서를 참고하세요.

autoClose 옵션의 세부 동작:

true - 드롭다운 메뉴 바깥이나 안을 클릭하면 닫힙니다.
false - 토글 버튼을 클릭하고 hide/toggle 메서드를 수동으로 호출할 때만 닫힙니다. (Esc 키를 눌러도 닫히지 않습니다)
'inside' - 드롭다운 메뉴 안을 클릭할 때만 닫힙니다.
'outside' - 드롭다운 메뉴 바깥을 클릭할 때만 닫힙니다. 참고: Esc 키로는 항상 닫을 수 있습니다.

popperConfig와 함께 함수 사용 (Using function with popperConfig)

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

메서드 (Methods)

메서드	설명
dispose	요소의 드롭다운을 파괴합니다. (DOM 요소에 저장된 데이터를 제거합니다.)
getInstance	DOM 요소에 연결된 드롭다운 인스턴스를 가져올 수 있는 정적 메서드입니다. 이렇게 사용할 수 있습니다: `bootstrap.Dropdown.getInstance(element)`.
getOrCreateInstance	DOM 요소에 연결된 드롭다운 인스턴스를 반환하거나, 초기화되지 않았다면 새로 만드는 정적 메서드입니다. 이렇게 사용할 수 있습니다: `bootstrap.Dropdown.getOrCreateInstance(element)`.
hide	주어진 navbar 또는 탭 내비게이션의 드롭다운 메뉴를 숨깁니다.
show	주어진 navbar 또는 탭 내비게이션의 드롭다운 메뉴를 보여줍니다.
toggle	주어진 navbar 또는 탭 내비게이션의 드롭다운 메뉴를 토글합니다.
update	요소의 드롭다운 위치를 업데이트합니다.

이벤트 (Events)

모든 드롭다운 이벤트는 트리거링 요소에서 발생한 후 버블링됩니다. 따라서 .dropdown-menu의 부모 요소에도 이벤트 리스너를 추가할 수 있습니다. hide.bs.dropdown과 hidden.bs.dropdown 이벤트는 (원래 이벤트 타입이 click일 때만) 클릭 이벤트의 Event Object를 담는 clickEvent 속성을 가집니다.

이벤트 타입	설명
hide.bs.dropdown	hide 인스턴스 메서드가 호출되는 즉시 발생합니다.
hidden.bs.dropdown	드롭다운이 사용자에게 숨겨지기 완료되고 CSS 전환이 완료되었을 때 발생합니다.
show.bs.dropdown	show 인스턴스 메서드가 호출되는 즉시 발생합니다.
shown.bs.dropdown	드롭다운이 사용자에게 보이게 되고 CSS 전환이 완료되었을 때 발생합니다.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

더 알아보기 (Learn more)

Bootstrap 문서

드롭다운

드롭다운 (Dropdowns)

본문

개요 (Overview)

접근성 (Accessibility)

예제 (Examples)

단일 버튼 (Single button)

스플릿 버튼 (Split button)

크기 조정 (Sizing)

다크 드롭다운 (Dark dropdowns) — v5.3.0에서 폐기

방향 (Directions)

가운데 정렬 (Centered)

드롭업 (Dropup)

가운데 드롭업 (Dropup centered)

드롭엔드 (Dropend)

드롭스타트 (Dropstart)

메뉴 아이템 (Menu items)

활성 (Active)

비활성 (Disabled)

메뉴 정렬 (Menu alignment)

반응형 정렬 (Responsive alignment)

정렬 옵션 (Alignment options)

메뉴 콘텐츠 (Menu content)

헤더 (Headers)

구분선 (Dividers)

텍스트 (Text)

폼 (Forms)

자동 닫기 동작 (Auto close behavior)

CSS

변수 (Variables) — v5.2.0에서 추가

Sass 변수 (Sass variables)

Sass 믹스인 (Sass mixins)

사용법 (Usage)

데이터 속성으로 (Via data attributes)

JavaScript로 (Via JavaScript)

옵션 (Options)

popperConfig와 함께 함수 사용 (Using function with popperConfig)

메서드 (Methods)

이벤트 (Events)

더 알아보기 (Learn more)

드롭다운

드롭다운 (Dropdowns)

본문

개요 (Overview)

접근성 (Accessibility)

예제 (Examples)

단일 버튼 (Single button)

스플릿 버튼 (Split button)

크기 조정 (Sizing)

다크 드롭다운 (Dark dropdowns) — v5.3.0에서 폐기

방향 (Directions)

가운데 정렬 (Centered)

드롭업 (Dropup)

가운데 드롭업 (Dropup centered)

드롭엔드 (Dropend)

드롭스타트 (Dropstart)

메뉴 아이템 (Menu items)

활성 (Active)

비활성 (Disabled)

메뉴 정렬 (Menu alignment)

반응형 정렬 (Responsive alignment)

정렬 옵션 (Alignment options)

메뉴 콘텐츠 (Menu content)

헤더 (Headers)

구분선 (Dividers)

텍스트 (Text)

폼 (Forms)

드롭다운 옵션 (Dropdown options)

자동 닫기 동작 (Auto close behavior)

CSS

변수 (Variables) — v5.2.0에서 추가

Sass 변수 (Sass variables)

Sass 믹스인 (Sass mixins)

사용법 (Usage)

데이터 속성으로 (Via data attributes)

JavaScript로 (Via JavaScript)

옵션 (Options)

popperConfig와 함께 함수 사용 (Using function with popperConfig)

메서드 (Methods)

이벤트 (Events)

더 알아보기 (Learn more)