주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
Check
in English

드롭다운

부트스트랩 드롭다운 플러그인을 사용하여 링크 목록 등을 표시하기 위한 상황별 오버레이를 토글합니다.

이 페이지에서

개요

드롭다운은 링크 목록 등을 표시하기 위한 토글 가능한 상황별 오버레이입니다. 포함된 Bootstrap 드롭다운 JavaScript 플러그인과 대화식으로 만들어집니다. 호버링이 아닌 클릭으로 전환됩니다. 이것은 의도적인 설계 결정 입니다.

드롭다운은 동적 위치 지정 및 뷰포트 감지를 제공하는 타사 라이브러리인 Popper 를 기반으로 합니다. Bootstrap의 JavaScript 이전 에 popper.min.js 를 포함 하거나 Popper가 포함된 bootstrap.bundle.min.js/ 를 사용하십시오. bootstrap.bundle.js동적 위치 지정이 필요하지 않기 때문에 Popper는 탐색 모음에서 드롭다운을 배치하는 데 사용되지 않습니다.

접근성

WAI ARIA 표준 은 실제 role="menu"위젯 을 정의하지만 이는 작업이나 기능을 트리거하는 애플리케이션과 유사한 메뉴에만 해당됩니다. ARIA 메뉴에는 메뉴 항목, 확인란 메뉴 항목, 라디오 버튼 메뉴 항목, 라디오 버튼 그룹 및 하위 메뉴만 포함될 수 있습니다.

반면 부트스트랩의 드롭다운은 일반적으로 설계되었으며 다양한 상황과 마크업 구조에 적용할 수 있습니다. 예를 들어 검색 필드 또는 로그인 양식과 같은 추가 입력 및 양식 컨트롤이 포함된 드롭다운을 만들 수 있습니다. 이러한 이유로 부트스트랩은 진정한 ARIA 메뉴 에 필요한 role및 속성 을 기대하지 않습니다(또는 자동으로 추가하지 않음) . 작성자는 이러한 보다 구체적인 속성을 스스로 포함해야 합니다.aria-

.dropdown-item그러나 Bootstrap은 커서 키를 사용하여 개별 요소를 이동하고 키로 메뉴를 닫는 기능과 같은 대부분의 표준 키보드 메뉴 상호 작용에 대한 기본 제공 지원을 추가합니다 ESC.

예

드롭다운의 토글(버튼 또는 링크)과 드롭다운 메뉴를 .dropdown, 또는 position: relative;. 드롭다운은 잠재적인 요구 사항에 더 잘 맞도록 <a>또는 요소 에서 트리거될 수 있습니다 . <button>여기에 표시된 예 <ul>는 적절한 경우 의미론적 요소를 사용하지만 사용자 정의 마크업이 지원됩니다.

단일 버튼

모든 싱글 .btn은 약간의 마크업 변경으로 드롭다운 토글로 전환될 수 있습니다. 다음은 두 <button>요소 중 하나와 함께 작동하도록 하는 방법입니다.

HTML 
<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>

그리고 <a>요소와 함께:

HTML 
<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">
    Action
  </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>

분할 버튼

유사하게, 단일 버튼 드롭다운과 거의 동일한 마크업을 사용하여 분할 버튼 드롭다운을 생성하지만 .dropdown-toggle-split드롭다운 캐럿 주위에 적절한 간격을 추가합니다.

이 추가 클래스를 사용 padding하여 캐럿 양쪽의 가로를 25% 줄이고 margin-left일반 버튼 드롭다운에 추가된 것을 제거합니다. 이러한 추가 변경 사항은 캐럿을 분할 버튼 중앙에 유지하고 기본 버튼 옆에 더 적절한 크기의 히트 영역을 제공합니다.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</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>

사이징

버튼 드롭다운은 기본 및 분할 드롭다운 버튼을 포함하여 모든 크기의 버튼에서 작동합니다.

<!-- 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>

어두운 드롭다운

기존 .dropdown-menu-dark의 .dropdown-menu. 드롭다운 항목을 변경할 필요가 없습니다.

HTML 
<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에서 사용하기 위해:

HTML 
<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">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <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>

지도

RTL

RTL에서 부트스트랩을 사용할 때 방향이 미러링 .dropstart되어 오른쪽에 의미가 나타납니다.

중앙

.dropdown-center상위 요소에서 토글 아래 중앙에 드롭다운 메뉴를 만듭니다 .

HTML 
<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.

<!-- 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-center상위 요소에서 토글 위의 중앙에 드롭업 메뉴를 만듭니다 .

HTML 
<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상위 요소 에 추가하여 요소 오른쪽에서 드롭다운 메뉴를 트리거합니다 .

<!-- 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상위 요소 에 추가하여 요소 왼쪽에서 드롭다운 메뉴를 트리거합니다 .

<!-- 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>요소를 드롭다운 항목으로 사용할 수 있습니다 .

HTML 
<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 또는 텍스트 유틸리티를 사용하여 자유롭게 스타일을 추가하십시오.

HTML 
<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드롭다운의 항목에 추가 하여 활성 상태로 스타일을 지정합니다 . 활성 상태를 보조 기술에 전달하려면 현재 페이지 또는 집합의 현재 항목에 대한 값을 사용하여 aria-current속성을 사용합니다 .pagetrue

HTML 
<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드롭다운의 항목에 추가 하여 비활성화된 항목으로 스타일을 지정합니다 .

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

기본적으로 드롭다운 메뉴는 상위 항목의 왼쪽과 위쪽에서 100% 자동으로 배치됩니다. 방향 .drop*클래스를 사용하여 이를 변경할 수 있지만 추가 수정자 클래스로 제어할 수도 있습니다.

드롭다운 메뉴를 오른쪽 정렬에 추가 .dropdown-menu-end합니다 . .dropdown-menuRTL에서 부트스트랩을 사용할 때 방향이 미러링 .dropdown-menu-end되어 왼쪽에 의미가 나타납니다.

머리! 드롭다운은 탐색 모음에 포함된 경우를 제외하고 Popper 덕분에 배치됩니다.
HTML 
<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>

반응형 정렬

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

드롭다운 메뉴를 주어진 중단점 이상으로 오른쪽 정렬하려면 를 추가 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end합니다.

HTML 
<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합니다.

HTML 
<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>

data-bs-display="static"Popper는 탐색 모음에서 사용되지 않기 때문에 탐색 모음의 드롭다운 버튼에 속성 을 추가할 필요 가 없습니다.

정렬 옵션

위에 표시된 대부분의 옵션을 사용하여 다양한 드롭다운 정렬 옵션을 한 곳에서 볼 수 있는 작은 주방 싱크대 데모가 있습니다.

HTML 
<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>

메뉴 내용

헤더

드롭다운 메뉴에서 작업 섹션에 레이블을 지정하는 헤더를 추가합니다.

HTML 
<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>

분할기

구분선으로 관련 메뉴 항목의 그룹을 구분합니다.

HTML 
<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>

텍스트

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

드롭다운 메뉴 내에서 자유롭게 흐르는 몇 가지 예시 텍스트.

그리고 이것은 더 많은 예제 텍스트입니다.

HTML 
<div class="dropdown-menu p-4 text-muted" 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>

양식

드롭다운 메뉴에 양식을 넣거나 드롭다운 메뉴로 만들고 여백 또는 패딩 유틸리티 를 사용하여 필요한 음수 공간을 제공합니다.

이 근처에 새로운? 가입하기 비밀번호를 잊으 셨나요?
HTML 
<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>
HTML 
<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하여 드롭다운 위치를 변경합니다.

HTML 
<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>

자동 닫기 동작

기본적으로 드롭다운 메뉴 내부 또는 외부를 클릭하면 드롭다운 메뉴가 닫힙니다. autoClose이 옵션을 사용 하여 드롭다운의 동작을 변경할 수 있습니다.

HTML 
<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 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="outside" 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="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

변수

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};

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 변수

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

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

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

$dropdown-link-disabled-color:      $gray-500;

$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;

믹신

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

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

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

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

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

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

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

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

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

용법

데이터 속성 또는 JavaScript를 통해 드롭다운 플러그인 .show은 상위 .dropdown-menu. 속성 은 data-bs-toggle="dropdown"응용 프로그램 수준에서 드롭다운 메뉴를 닫는 데 사용되므로 항상 사용하는 것이 좋습니다.

터치 지원 장치에서 드롭다운을 열면 요소 mouseover의 직계 자식에 빈 핸들러가 추가됩니다. <body>이 못생긴 해킹은 iOS 이벤트 위임 의 단점을 해결하는 데 필요합니다 . 그렇지 않으면 드롭다운 외부의 탭이 드롭다운을 닫는 코드를 트리거하지 못하게 됩니다. 드롭다운이 닫히면 이러한 추가 빈 mouseover핸들러가 제거됩니다.

데이터 속성을 통해

링크 또는 버튼에 추가 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를 통해 드롭다운을 호출합니다.

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-toggle="dropdown"여전히 필요

JavaScript를 통해 드롭다운을 호출하든 대신 data-api를 사용하든 상관없이 data-bs-toggle="dropdown"항상 드롭다운의 트리거 요소에 있어야 합니다.

옵션

옵션은 데이터 속성이나 JavaScript를 통해 전달할 수 있으므로 에서 data-bs-와 같이 옵션 이름을 에 추가할 수 있습니다 data-bs-animation="{value}". 데이터 속성을 통해 옵션을 전달할 때 옵션 이름의 대소문자 유형을 " camelCase "에서 " kebab-case "로 변경해야 합니다. 예를 들어, data-bs-custom-class="beautifier"대신 를 사용 data-bs-customClass="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. 또한 기존 데이터 속성은 와 같은 JSON 값을 저장할 수 data-bs-delay='{"show":0,"hide":150}'있습니다.

이름 유형 기본 설명
autoClose 부울, 문자열 true 드롭다운의 자동 닫기 동작을 구성합니다.
  • true- 드롭다운 메뉴의 외부 또는 내부를 클릭하면 드롭다운이 닫힙니다.
  • false- 토글 버튼을 클릭하고 수동으로 hide또는 toggle메소드를 호출하면 드롭다운이 닫힙니다. esc(또한 키 를 눌러도 닫히지 않습니다 )
  • 'inside'- 드롭다운 메뉴 내부를 클릭해야만 드롭다운이 닫힙니다.
  • 'outside'- 드롭다운 메뉴 외부를 클릭해야만 드롭다운이 닫힙니다.
참고: 드롭다운은 항상 ESC키로 닫을 수 있습니다.
boundary 문자열, 요소 'clippingParents' 드롭다운 메뉴의 오버플로 제약 조건 경계(Popper의 preventOverflow 수정자에만 적용됨). 기본적으로 clippingParentsHTMLElement 참조를 허용하고 허용할 수 있습니다(JavaScript를 통해서만). 자세한 내용은 Popper의 detectOverflow 문서 를 참조하십시오 .
display 끈 'dynamic' 기본적으로 동적 위치 지정에는 Popper를 사용합니다. 로 이것을 비활성화하십시오 static.
offset 배열, 문자열, 함수 [0, 2] 대상을 기준으로 한 드롭다운의 오프셋입니다. 다음과 같이 쉼표로 구분된 값을 사용하여 데이터 속성의 문자열을 전달할 수 있습니다 data-bs-offset="10,20". 오프셋을 결정하는 데 함수가 사용되면 포퍼 배치, 참조 및 포퍼 사각형을 첫 번째 인수로 포함하는 객체와 함께 호출됩니다. 트리거 요소 DOM 노드는 두 번째 인수로 전달됩니다. 함수는 두 개의 숫자( skidding , distance ) 가 있는 배열을 반환해야 합니다 . 자세한 내용은 Popper의 오프셋 문서 를 참조하십시오 .
popperConfig null, 객체, 함수 null Bootstrap의 기본 Popper 구성을 변경하려면 Popper의 구성 을 참조하십시오 . 함수가 Popper 구성을 생성하는 데 사용되면 Bootstrap의 기본 Popper 구성을 포함하는 객체와 함께 호출됩니다. 기본값을 사용하고 고유한 구성과 병합하는 데 도움이 됩니다. 함수는 Popper에 대한 구성 개체를 반환해야 합니다.
reference 문자열, 요소, 개체 'toggle' 드롭다운 메뉴의 참조 요소입니다. 'toggle', 'parent', HTMLElement 참조 또는 제공하는 객체 의 값을 허용합니다 getBoundingClientRect. 자세한 내용은 Popper의 생성자 문서 및 가상 요소 문서 를 참조하십시오 .

기능 사용popperConfig 

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

행동 양식

방법 설명
dispose 요소의 드롭다운을 파괴합니다. (DOM 요소에 저장된 데이터 제거)
getInstance DOM 요소에 연결된 드롭다운 인스턴스를 가져올 수 있는 정적 메서드는 다음과 같이 사용할 수 있습니다 bootstrap.Dropdown.getInstance(element).
getOrCreateInstance DOM 요소와 연결된 드롭다운 인스턴스를 반환하거나 초기화되지 않은 경우 새 인스턴스를 만드는 정적 메서드입니다. 다음과 같이 사용할 수 있습니다 bootstrap.Dropdown.getOrCreateInstance(element).
hide 주어진 탐색 모음 또는 탭 탐색의 드롭다운 메뉴를 숨깁니다.
show 주어진 탐색 모음 또는 탭 탐색의 드롭다운 메뉴를 표시합니다.
toggle 주어진 탐색 모음 또는 탭 탐색의 드롭다운 메뉴를 토글합니다.
update 요소의 드롭다운 위치를 업데이트합니다.

이벤트

모든 드롭다운 이벤트는 토글 요소에서 발생한 다음 버블링됩니다. 따라서 .dropdown-menu의 상위 요소에 이벤트 리스너를 추가할 수도 있습니다. 이벤트에는 클릭 이벤트 hide.bs.dropdown에 대한 이벤트 개체가 포함된 속성(원래 이벤트 유형이 인 경우에만 )이 있습니다.hidden.bs.dropdownclickEventclick

이벤트 유형 설명
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...
})