적절한 토글 클래스와 메뉴 구조를 사용하여 최소한의 마크업 변경으로 모든 버튼이나 링크를 드롭다운 토글로 전환할 수 있습니다.

[--placement:bottom-right] 클래스를 사용하여 드롭다운 메뉴를 요소의 오른쪽에 배치하십시오.

드롭다운 버튼은 아이콘을 포함하거나 제외하도록 커스텀할 수 있어, 깔끔한 텍스트 전용 토글이나 커스텀 아이콘으로 시각적으로 향상된 토글을 만들 수 있습니다.

일반 버튼과 별도의 토글을 결합하여 분할 버튼 드롭다운을 만드세요. 이 레이아웃은 메인 버튼에서 빠른 작업을 제공하고 드롭다운에서 추가 옵션을 제공합니다.

드롭다운 메뉴는 모든 버튼 변형과 함께 사용할 수 있으므로 기본, 보조 또는 성공 버튼과 같은 다양한 색상이나 스타일에 맞출 수 있습니다.

드롭다운 메뉴는 유연한 디자인 옵션을 위해 크고 작은 버튼 또는 분할 버튼 변형을 포함한 모든 크기의 버튼과 결합할 수 있습니다.

부모 요소에 [--placement:top] 또는 [--placement:top-left] 클래스를 사용하여 토글 버튼 위에 드롭다운 메뉴를 표시하십시오.

부모 요소에 [--placement:left-start] 클래스를 사용하여 토글 버튼의 왼쪽에 드롭다운 메뉴를 배치하십시오.

부모 요소에 [--placement:right-end] 클래스를 사용하여 토글 버튼의 오른쪽에 드롭다운 메뉴를 표시하십시오.

드롭다운 항목에 .active 클래스를 사용하여 현재 선택되었거나 활성화된 옵션으로 강조하십시오.

드롭다운 항목에 .disabled 클래스를 사용하여 메뉴 내에서 사용할 수 없거나 비활성화된 옵션을 나타내십시오.

드롭다운 메뉴 내부에 헤더를 추가하여 관련 메뉴 항목을 명확하게 그룹화하거나 레이블을 지정하십시오.

메뉴 요소에 data-theme="dark" 를 추가하여 드롭다운 메뉴에 다크 테마를 적용하십시오. 이를 통해 개별 항목을 변경하지 않고도 어두운 내비게이션 바나 레이아웃에 맞출 수 있습니다.

[--placement:bottom] 또는 [--placement:top] 클래스를 사용하여 드롭다운 메뉴를 토글 버튼의 아래나 위 중앙에 배치하십시오.

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

드롭다운 메뉴 내에 자유로운 형식의 텍스트를 배치하고 간격 유틸리티를 사용하세요. 메뉴 너비를 제한하기 위해 추가적인 크기 조정 스타일이 필요할 수 있습니다.

드롭다운 메뉴 내에 폼을 넣거나 드롭다운 메뉴로 만들고, 마진 또는 패딩 유틸리티를 사용하여 필요한 여백을 주십시오.