Dropdown

버튼·링크 등 트리거를 클릭하면 메뉴 패널이 표시되는 Nuxt 컴포넌트입니다. Menu 컴포넌트와 조합해 액션 목록·사용자 메뉴·필터 등에 사용합니다.

기본

dropdown · dropdown_trigger · dropdown_menu으로 트리거와 패널을 구성합니다. 패널 안에는 menu_vertical · menu_compact를 배치합니다.

is-open 클래스와 aria-expanded="true"로 패널이 열린 상태를 표현합니다.

Button 컴포넌트 스킨을 트리거로 사용합니다. filled · outline · ghost · text · icon-only 조합이 가능합니다.

btn_select · btn_select-text를 트리거로 사용합니다. Select 컴포넌트의 커스텀 트리거와 동일한 스타일입니다.

btn_select 상세 변형은 Button — 셀렉트 박스형 섹션을 참고하세요.

dropdown_placement-end · dropdown_placement-top으로 패널 위치를 조정합니다. 기본은 트리거 왼쪽 아래입니다.

Menu 컴포넌트의 아이콘 · 구분선 · 그룹 · 배지를 dropdown_menu 안에서 그대로 사용합니다.

maxVisibleItems로 보이는 항목 수를 제한합니다. 초과 시 패널 안에서 스크롤됩니다. menuWidth · menuMinWidth로 가로 너비를 조절할 수 있습니다.

HTML 마크업에서는 dropdown_menu-scrollable 클래스와 style="--dropdown-max-visible-items: 4"로 동일하게 적용합니다.

dropdown.is-disabled로 전체를 비활성화하거나, menu_item.is-disabled · menu_link.is-disabled로 개별 항목을 막습니다.

툴바 우측에 사용자 메뉴 Dropdown을 배치한 예시입니다. close-on-select로 항목 선택 시 닫히며 Esc·외부 클릭도 지원합니다.

Prop	타입	기본값	설명
`open`	boolean	—	열림 상태 (제어, v-model:open)
`default-open`	boolean	false	초기 열림 상태 (비제어)
`@open-change`	(open: boolean) => void	—	열림 상태 변경 이벤트
`disabled`	boolean	false	is-disabled
`placement`	'end' \| 'top'	—	dropdown_placement-end · dropdown_placement-top
`fit`	boolean	false	dropdown_fit — 트리거 너비 맞춤
`close-on-select`	boolean	false	메뉴 항목 선택 후 패널 닫기
`max-visible-items`	number	—	패널에 보이는 최대 항목 수. 초과 시 dropdown_menu-scrollable로 목록 스크롤
`menu-width`	string \| number	—	패널 가로 너비 (숫자는 rem)
`menu-min-width`	string \| number	—	패널 최소 가로 너비 (숫자는 rem)

슬롯	설명
`trigger`	트리거 버튼·링크 (dropdown_trigger)
`default`	메뉴 패널 (dropdown_menu, 보통 Menu)

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`dropdown · dropdown_menu`	루트·메뉴 패널
`dropdown_placement-end · dropdown_placement-top · dropdown_fit`	배치·너비
`dropdown_menu-scrollable`	max-visible-items 지정 시 — menu_list 스크롤
`data-dropdown`	Vue Dropdown 식별자
`is-open · is-disabled`	상태
`role="menu"`	메뉴 시맨틱

토큰	기본값	설명
`--dropdown-min-width · --dropdown-menu-width`	10rem · auto	패널 최소·기본 너비
`--dropdown-offset`	—	트리거와 패널 간격
`--dropdown-max-visible-items`	—	max-visible-items prop으로 주입 — 스크롤 높이 계산
`--dropdown-item-line-height`	1.4	항목 높이 계산용 줄 높이
`--z-dropdown`	100	레이어 순서