드롭다운

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

개요

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

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

소스에서 JavaScript를 빌드하는 경우util.js .

접근성

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

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

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

예

드롭다운의 토글(버튼 또는 링크)과 드롭다운 메뉴를 .dropdown, 또는 position: relative;. 드롭다운은 잠재적인 요구 사항에 더 잘 맞도록 <a>또는 요소 에서 트리거될 수 있습니다 .<button>

단일 버튼

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

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

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

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

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

가장 좋은 점은 모든 버튼 변형에서도 이 작업을 수행할 수 있다는 것입니다.

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

사이징

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

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

지도

드롭업

상위 요소 에 추가하여 요소 위의 드롭다운 메뉴를 트리거합니다 .dropup.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

드롭라이트

.dropright상위 요소 에 추가하여 요소 오른쪽에서 드롭다운 메뉴를 트리거합니다 .

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

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

드롭레프트

.dropleft상위 요소 에 추가하여 요소 왼쪽에서 드롭다운 메뉴를 트리거합니다 .

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

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

역사적으로 드롭다운 메뉴 내용 은 링크여야 했지만 v4에서는 더 이상 그렇지 않습니다. <button>이제 선택적으로 s 대신 드롭다운에서 요소를 사용할 수 있습니다 <a>.

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

를 사용하여 비대화형 드롭다운 항목을 만들 수도 있습니다 .dropdown-item-text. 사용자 정의 CSS 또는 텍스트 유틸리티를 사용하여 자유롭게 스타일을 추가하십시오.

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

활동적인

.active드롭다운의 항목에 추가 하여 활성 상태로 스타일을 지정합니다 .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

장애가 있는

.disabled드롭다운의 항목에 추가 하여 비활성화된 항목으로 스타일을 지정합니다 .

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

기본적으로 드롭다운 메뉴는 상위 항목의 왼쪽과 위쪽에서 100% 자동으로 배치됩니다. 드롭다운 메뉴를 오른쪽 정렬에 추가 .dropdown-menu-right합니다 ..dropdown-menu

머리! Popper 덕분에 드롭다운이 배치됩니다(네비바에 포함된 경우 제외).

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

반응형 정렬

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

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

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

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

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

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

헤더

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

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

분할기

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

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

텍스트

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

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

양식

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

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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>

data-offset또는 를 사용 data-reference하여 드롭다운 위치를 변경합니다.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

용법

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

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

데이터 속성을 통해

링크 또는 버튼에 추가 data-toggle="dropdown"하여 드롭다운을 전환합니다.

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

자바스크립트를 통해

JavaScript를 통해 드롭다운을 호출합니다.

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`여전히 필요

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

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-offset="".

이름	유형	기본	설명
오프셋	번호 \| 문자열 \| 기능	0	대상을 기준으로 한 드롭다운의 오프셋입니다. 오프셋을 결정하기 위해 함수가 사용되면 오프셋 데이터를 첫 번째 인수로 포함하는 객체와 함께 호출됩니다. 함수는 동일한 구조의 객체를 반환해야 합니다. 트리거 요소 DOM 노드는 두 번째 인수로 전달됩니다. 자세한 내용은 Popper의 오프셋 문서 를 참조하십시오 .
튀기다	부울	진실	참조 요소가 겹치는 경우 드롭다운이 뒤집힐 수 있습니다. 자세한 내용은 Popper의 플립 문서 를 참조하십시오 .
경계	문자열 \| 요소	'스크롤 부모'	드롭다운 메뉴의 오버플로 제약 조건 경계입니다. `'viewport'`, `'window'`, `'scrollParent'`, 또는 HTMLElement 참조 값을 허용합니다 (JavaScript만 해당). 자세한 내용은 Popper의 preventOverflow 문서 를 참조하세요 .
참조	문자열 \| 요소	'비녀장'	드롭다운 메뉴의 참조 요소입니다. `'toggle'`, `'parent'`또는 HTMLElement 참조 의 값을 허용합니다 . 자세한 내용은 Popper의 referenceObject 문서 를 참조하십시오 .
표시하다	끈	'동적'	기본적으로 동적 위치 지정에는 Popper를 사용합니다. 로 이것을 비활성화하십시오 `static`.
팝퍼 구성	널 \| 물체	없는	Bootstrap의 기본 Popper 구성을 변경하려면 Popper의 구성 을 참조하십시오.

boundary가 이외의 값으로 설정 되면 'scrollParent'스타일 이 컨테이너 position: static에 적용됩니다 ..dropdown

행동 양식

방법	설명
`$().dropdown('toggle')`	주어진 탐색 모음 또는 탭 탐색의 드롭다운 메뉴를 토글합니다.
`$().dropdown('show')`	주어진 탐색 모음 또는 탭 탐색의 드롭다운 메뉴를 표시합니다.
`$().dropdown('hide')`	주어진 탐색 모음 또는 탭 탐색의 드롭다운 메뉴를 숨깁니다.
`$().dropdown('update')`	요소의 드롭다운 위치를 업데이트합니다.
`$().dropdown('dispose')`	요소의 드롭다운을 파괴합니다.

이벤트

모든 드롭다운 이벤트는 .dropdown-menu의 부모 요소 에서 시작 relatedTarget되며 값이 토글 앵커 요소인 속성이 있습니다. 이벤트에는 클릭 이벤트 hide.bs.dropdown에 대한 이벤트 개체가 포함된 속성(원래 이벤트 유형이 인 경우에만 )이 있습니다.hidden.bs.dropdownclickEventclick

이벤트	설명
`show.bs.dropdown`	이 이벤트는 show instance 메소드가 호출될 때 즉시 발생합니다.
`shown.bs.dropdown`	이 이벤트는 드롭다운이 사용자에게 표시될 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
`hide.bs.dropdown`	이 이벤트는 hide instance 메서드가 호출되면 즉시 시작됩니다.
`hidden.bs.dropdown`	이 이벤트는 드롭다운이 사용자에게 숨겨지면 시작됩니다(CSS 전환이 완료될 때까지 기다림).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

드롭다운

개요

접근성

예

단일 버튼

분할 버튼

사이징

지도

드롭업

드롭라이트

드롭레프트

메뉴 항목

활동적인

장애가 있는

메뉴 정렬

반응형 정렬

메뉴 내용

헤더

드롭다운 헤더

분할기

텍스트

양식

드롭다운 옵션

용법

데이터 속성을 통해

자바스크립트를 통해

data-toggle="dropdown"여전히 필요

옵션

행동 양식

이벤트

`data-toggle="dropdown"`여전히 필요