Menu 내비게이션 메뉴

사이트/앱의 주요 내비게이션입니다. 가로/세로 두 가지 레이아웃을 지원하며, 서브메뉴, 그룹, 접기 모음과 아코디언을 지원합니다.

내비게이션 메뉴

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <p class="demo-note">horizontal 가로 모드</p>
    <LhMenu v-model="active" mode="horizontal">
      <LhMenuItem index="home">홈</LhMenuItem>
      <LhSubMenu index="song" title="송대 회화">
        <LhMenuItem index="fan">범관</LhMenuItem>
        <LhMenuItem index="guo">곽희</LhMenuItem>
      </LhSubMenu>
      <LhMenuItem index="yuan" disabled>원대 (비활성화)</LhMenuItem>
    </LhMenu>
    <p class="demo-note">선택됨: {{ active }}</p>
    <p class="demo-note">vertical 세로 모드 + 아코디언 (uniqueOpened) + 그룹</p>
    <LhMenu
      v-model="active2"
      mode="vertical"
      :collapse="collapsed"
      unique-opened
      :default-openeds="['g1']"
      style="width: 220px"
    >
      <LhSubMenu index="g1" title="산수화 권">
        <LhMenuItemGroup title="북송">
          <LhMenuItem index="fan2">범관</LhMenuItem>
          <LhMenuItem index="guo2">곽희</LhMenuItem>
        </LhMenuItemGroup>
        <LhMenuItemGroup title="남송">
          <LhMenuItem index="li">이당</LhMenuItem>
        </LhMenuItemGroup>
      </LhSubMenu>
      <LhMenuItem index="yuan2">원대 회화</LhMenuItem>
    </LhMenu>
    <LhButton size="small" @click="collapsed = !collapsed">{{ collapsed ? '펼치기' : '접기' }} (collapse)</LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 'home',
    active2: 'fan2',
    collapsed: false,
  }),
}
</script>

Menu Props

프로퍼티	설명	타입	기본값
v-model	현재 활성 항목 (제어되는 modelValue, 미전달 시 컴포넌트 내부에서 관리)	string	—
mode	레이아웃 모드	'horizontal' \| 'vertical'	'horizontal'
collapse	세로 모드를 아이콘 모음으로 접기 (서브메뉴는 플라이아웃 패널로 전환)	boolean	false
defaultOpeneds	기본 펼친 서브메뉴 키 (비제어)	string[]	—
openeds	제어되는 펼친 서브메뉴 키	string[]	—
uniqueOpened	아코디언: 동시에 하나의 서브메뉴만 펼침	boolean	false
sx	sx 레이아웃 단축 속성	—	—

MenuItem Props

프로퍼티	설명	타입	기본값
index	고유 식별자 (필수)	string	—
disabled	비활성화 여부	boolean	false
sx	sx 레이아웃 단축 속성	—	—

SubMenu Props

프로퍼티	설명	타입	기본값
index	고유 식별자 (필수)	string	—
title	제목 (title 슬롯 사용 가능)	string	—
disabled	비활성화 여부	boolean	false
sx	sx 레이아웃 단축 속성	—	—

MenuItemGroup Props

프로퍼티	설명	타입	기본값
title	그룹 제목 (title 슬롯 사용 가능)	string	—
sx	sx 레이아웃 단축 속성	—	—

슬롯

슬롯	설명
SubMenu title	서브메뉴 제목
SubMenu default	서브메뉴 콘텐츠 (MenuItem / MenuItemGroup 배치)
MenuItemGroup title	그룹 제목
MenuItemGroup default	그룹 내 메뉴 항목