분할 버튼 드롭다운(Split Button Dropdown)은 일반 드롭다운 버튼과 동일한 기본 스타일을 사용하지만, 드롭다운 메뉴 외에 기본 액션(주요 작업)을 함께 제공할 수 있다는 점이 특징입니다.
분할 버튼은 두 개의 영역으로 나뉩니다. 왼쪽에는 클릭 시 바로 실행되는 기본 액션 버튼이 위치하고, 오른쪽에는 클릭하면 드롭다운 메뉴가 펼쳐지는 토글 버튼이 배치됩니다. 이를 통해 자주 사용하는 작업과 세부 옵션 선택을 하나의 UI에서 모두 처리할 수 있습니다.
예제
아래 코드를 실행하면 부트스트랩으로 구현된 분할 버튼 드롭다운을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Admissions</button> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Masters</a></li> <li><a href = "#">Bachelors</a></li> </ul> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-primary">Faculty</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Management</a></li> <li><a href = "#">Technical</a></li> <li><a href = "#">Staff</a></li> </ul> </div> </body> </html>
핵심 클래스 정리
- .btn-group : 여러 버튼을 하나의 그룹으로 묶어 분할 버튼 형태로 표시합니다.
- .dropdown-toggle 및 data-toggle="dropdown" : 해당 버튼을 클릭했을 때 드롭다운 메뉴가 열리도록 설정합니다.
- .caret : 드롭다운 메뉴가 있음을 알려주는 아래 방향 화살표 아이콘을 표시합니다.
- .sr-only : 화면에는 보이지 않지만 스크린 리더 사용자를 위해 "Toggle Dropdown"이라는 접근성 텍스트를 제공합니다.
위 예제처럼 btn-default, btn-primary 등 다양한 버튼 스타일 클래스를 조합하면 디자인에 맞는 분할 버튼 드롭다운을 손쉽게 만들 수 있습니다.