Menu

웹사이트 내비게이션을 제공하는 메뉴 컴포넌트예요.

출처: 문서

본문

TIP el-menu의 기본 높이를 재정의하고 싶으면 다음 CSS를 사용하면 돼요:

.el-menu--horizontal {
  --el-menu-horizontal-height: 100px;
}

상단 바 (Top bar)

상단 바 메뉴는 다양한 시나리오에서 쓸 수 있어요. 기본적으로 Menu는 세로형(vertical)이지만, mode prop을 'horizontal'로 설정하면 가로형으로 바꿀 수 있어요. 추가로 sub-menu 컴포넌트를 사용해 2단계 메뉴를 만들 수 있어요. Menu는 background-color, text-color, active-text-color를 제공해서 색상을 커스터마이징할 수 있어요.

좌우 배치 (Left And Right)

메뉴 항목을 왼쪽이나 오른쪽으로 배치할 수 있어요.

사이드 바 (Side bar)

하위 메뉴가 있는 세로형 메뉴예요. el-menu-item-group 컴포넌트로 메뉴 그룹을 만들 수 있고, 그룹 이름은 title prop이나 명명된 슬롯으로 정해요.

커스텀 색상 (Custom colors)

접기 (Collapse)

세로형 메뉴는 접을 수 있어요.

Popper Offset 2.4.4

popperOffset를 가진 Submenu는 Menu의 popper-offset을 재정의해요.

Name Description Type Default
mode 메뉴 표시 모드 enum vertical
collapse 메뉴가 접혔는지 여부 (세로 모드에서만 사용 가능) boolean false
ellipsis 메뉴가 말줄임 되는지 여부 (가로 모드에서만 사용 가능) boolean true
ellipsis-icon 2.4.4 커스텀 말줄임 아이콘 (가로 모드이면서 ellipsis가 true일 때만) string / Component —
popper-offset 2.4.4 popper의 오프셋 (모든 하위 메뉴에 적용) number 6
default-active 페이지 로드 시 활성 메뉴의 인덱스 string ''
default-openeds 현재 활성화된 하위 메뉴의 인덱스를 담은 배열 array []
unique-opened 하위 메뉴 하나만 활성화할 수 있는지 여부 boolean false
menu-trigger 하위 메뉴가 트리거되는 방식, mode가 'horizontal'일 때만 동작 enum hover
router vue-router 모드 활성화 여부. true면 index를 'path'로 사용해 라우트 동작을 활성화해요. default-active와 함께 사용해서 로드 시 활성 항목을 설정해요 boolean false
collapse-transition 접힘 전환(collapse transition) 활성화 여부 boolean true
popper-effect 2.2.26 Tooltip 테마. 내장 테마: dark / light (메뉴가 접혔을 때) enum / string dark
close-on-click-outside 2.4.4 외부 클릭 시 메뉴가 접히는지 여부 (선택) boolean false
popper-class 2.5.0 모든 팝업 메뉴와 제목 tooltip의 커스텀 클래스 이름 string —
popper-style 2.11.5 모든 팝업 메뉴와 제목 tooltip의 커스텀 스타일 string / object —
show-timeout 2.5.0 모든 메뉴 표시 전 타임아웃 제어 number 300
hide-timeout 2.5.0 모든 메뉴 숨김 전 타임아웃 제어 number 300
background-color deprecated Menu의 배경색 (16진수 형식) (스타일 클래스의 --el-menu-bg-color 사용) string #ffffff
text-color deprecated Menu의 텍스트 색 (16진수 형식) (--el-menu-text-color 사용) string #303133
active-text-color deprecated 현재 활성 메뉴 항목의 텍스트 색 (16진수 형식) (--el-menu-active-color 사용) string #409eff
persistent 2.9.5 메뉴가 비활성이고 persistent이 false일 때 드롭다운 메뉴가 파괴됨 boolean true
Name Description Type
select 메뉴가 활성화될 때의 콜백 함수 Function
open 하위 메뉴가 펼쳐질 때의 콜백 함수 Function
close 하위 메뉴가 접힐 때의 콜백 함수 Function
Name Description Subtags
default 기본 내용 커스터마이징 SubMenu / Menu-Item / Menu-Item-Group
Name Description Type
open 특정 하위 메뉴 열기. 매개변수는 열 하위 메뉴의 인덱스 Function
close 특정 하위 메뉴 닫기. 매개변수는 닫을 하위 메뉴의 인덱스 Function
handleResize 메뉴 너비 재계산 수동 트리거 Function
updateActiveIndex 2.9.8 활성 메뉴의 인덱스 설정 Function
Name Description Type Default
index required 고유 식별 string —
popper-class 팝업 메뉴의 커스텀 클래스 이름 string —
popper-style 2.11.5 팝업 메뉴의 커스텀 스타일 string / object —
show-timeout 하위 메뉴 표시 전 타임아웃 (기본적으로 메뉴의 show-timeout 상속) number —
hide-timeout 하위 메뉴 숨김 전 타임아웃 (기본적으로 메뉴의 hide-timeout 상속) number —
disabled 하위 메뉴 비활성화 여부 boolean false
teleported 팝업 메뉴를 body로 텔레포트할지 여부. 1레벨 SubMenu는 기본 true, 그 외 SubMenu는 false boolean undefined
popper-offset popper의 오프셋 (메뉴의 popper 재정의) number —
expand-close-icon 메뉴가 펼쳐지고 하위 메뉴가 닫혔을 때의 아이콘. expand-close-icon과 expand-open-icon을 함께 전달해야 적용돼요 string / Component —
expand-open-icon 메뉴가 펼쳐지고 하위 메뉴가 열렸을 때의 아이콘. expand-open-icon과 expand-close-icon을 함께 전달해야 적용돼요 string / Component —
collapse-close-icon 메뉴가 접히고 하위 메뉴가 닫혔을 때의 아이콘. collapse-close-icon과 collapse-open-icon을 함께 전달해야 적용돼요 string / Component —
collapse-open-icon 메뉴가 접히고 하위 메뉴가 열렸을 때의 아이콘. collapse-open-icon과 collapse-close-icon을 함께 전달해야 적용돼요 string / Component —
Name Description Subtags
default 기본 내용 커스터마이징 SubMenu / Menu-Item / Menu-Item-Group
title 제목 내용 커스터마이징 —
Name Description Type Default
index required 고유 식별 string —
route Vue Router 라우트 위치 매개변수 string / object —
disabled 비활성화 여부 boolean false
Name Description Type
click menu-item이 클릭될 때의 콜백 함수. 매개변수는 menu-item 인스턴스 Function
Name Description
default 기본 내용 커스터마이징
title 제목 내용 커스터마이징
Name Description Type Default
title 그룹 제목 string —
Name Description Subtags
default 기본 내용 커스터마이징 Menu-Item
title 그룹 제목 커스터마이징 —

타입 선언 (Type Declarations)

/**
 * @param index index of activated menu
 * @param indexPath index path of activated menu
 * @param item the selected menu item
 * @param routerResult result returned by `vue-router` if `router` is enabled
 */
type MenuSelectEvent = (
  index: string,
  indexPath: string[],
  item: MenuItemClicked,
  routerResult?: Promise
) => void

/**
 * @param index index of expanded sub-menu
 * @param indexPath index path of expanded sub-menu
 */
type MenuOpenEvent = (index: string, indexPath: string[]) => void

/**
 * @param index index of collapsed sub-menu
 * @param indexPath index path of collapsed sub-menu
 */
type MenuCloseEvent = (index: string, indexPath: string[]) => void

interface MenuItemRegistered {
  index: string
  indexPath: string[]
  active: boolean
}

interface MenuItemClicked {
  index: string
  indexPath: string[]
  route?: RouteLocationRaw
}

더 알아보기 (Learn more)