| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
mode | 'vertical' | 'horizontal' | 'inline' | vertical | menu_vertical · menu_horizontal · menu_inline |
bordered | boolean | false | menu_bordered |
compact | boolean | false | menu_compact |
dark | boolean | false | menu_dark |
aria-label | string | — | nav aria-label |
Menu
앱 내비게이션·사이드바에 사용하는 메뉴 컴포넌트입니다. 수직·수평 배치, 아이콘, 서브메뉴, 구분선·그룹을 지원합니다.
기본
menu_vertical · menu_bordered로 세로 메뉴를 구성합니다. is-active와 aria-current="page"로 선택 항목을 표시합니다.
수평
menu_horizontal로 상단 탭·툴바 형태의 메뉴를 만듭니다.
아이콘
menu_icon으로 항목 앞에 아이콘을 배치합니다.
서브메뉴
menu_item-submenu · menu_submenu로 중첩 메뉴를 구성합니다. 버튼.menu_link의 aria-expanded로 펼침·접힘을 제어합니다.
구분선 · 그룹
menu_divider로 항목을 구분하고, menu_group-title로 섹션 제목을 표시합니다.
비활성
menu_item.is-disabled 또는 menu_link.is-disabled로 선택·클릭을 막습니다.
배지
menu_extra에 badge 컴포넌트를 배치해 알림 수·상태를 표시합니다.
수평 · 서브메뉴
menu_horizontal에서 서브메뉴는 드롭다운 형태로 표시됩니다.
사이드바 레이아웃
수직 메뉴를 사이드바로 배치하고 콘텐츠 영역과 함께 사용하는 예시입니다.
변형
menu_compact · menu_dark로 밀도와 배경을 조절합니다.
API · Menu Props
API · MenuItem Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 항목 텍스트 |
href | string | — | 링크 URL (a 태그) |
as | string | Component | a | button | 항목 루트 요소. NuxtLink 같은 커스텀 링크 컴포넌트 지정 |
active | boolean | false | is-active · aria-current |
disabled | boolean | false | is-disabled |
color | string | — | color_* (예: danger) |
ripple | boolean | true | 클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성 |
API · MenuSubmenu Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 서브메뉴 제목 |
expanded | boolean | false | 펼침 (aria-expanded) |
submenu-id | string | — | menu_submenu id (aria-controls) |
@expanded-change | (expanded: boolean) => void | — | 펼침 상태 변경 이벤트 |
ripple | boolean | true | 클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성 |
API · MenuGroup Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | — | 그룹 제목 (menu_group-title, 필수) |
API · Menu Slots
| 슬롯 | 설명 |
|---|---|
default | MenuItem · MenuSubmenu 등 |
API · MenuItem · MenuSubmenu Slots
| 슬롯 | 설명 |
|---|---|
icon | menu_icon |
extra | menu_extra (배지 등) |
| 슬롯 | 설명 |
|---|---|
icon | menu_icon |
default | 하위 MenuItem |
클래스 · 속성
Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
menu · menu_list · menu_item · menu_link | 루트·목록·항목·링크 |
menu_vertical · menu_horizontal · menu_inline | 배치 모드 |
menu_icon · menu_label · menu_extra · menu_arrow | 항목 파트 |
menu_item-submenu · menu_submenu | 서브메뉴 |
menu_group · menu_group-title · menu_divider | 그룹·구분선 |
menu_bordered · menu_compact · menu_dark | 스타일 변형 |
is-active · is-disabled | 상태 |
data-vue-menu | Vue가 선택·서브메뉴 상태를 관리하는 메뉴 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--menu-item-height · --menu-item-padding-x | — | 항목 크기·패딩 |
--menu-gap · --menu-radius | — | 간격·모서리 |
--menu-sub-indent | — | 서브메뉴 들여쓰기 |