Menu

계층형 명령을 이동하고 하위 메뉴를 열어 작업을 실행합니다.

용법

명령 목록

자주 쓰는 프로젝트 명령을 하나의 단일 메뉴에서 실행합니다.

<!-- Menu / Commands -->
<script setup lang="ts">
import { MenuRoot, MenuItem, MenuSeparator } from '@sectile/vue/menu'
import { ref } from 'vue'

const lastAction = ref('')
const items = [
  { id: 'new-project', parentID: null },
  { id: 'open-project', parentID: null },
  { id: 'save-project', parentID: null },
]

</script>

<template>
  <MenuRoot :items="items" @invoke="lastAction = $event">
    <MenuItem value="new-project">New project <kbd>⌘N</kbd></MenuItem>
    <MenuItem value="open-project">Open project <kbd>⌘O</kbd></MenuItem>
    <MenuSeparator />
    <MenuItem value="save-project">Save project <kbd>⌘S</kbd></MenuItem>
  </MenuRoot>
  <p v-if="lastAction" role="status">{{ lastAction }} invoked</p>
</template>

비활성 항목

비활성 상태에서 키보드와 포인터 입력을 차단합니다.

<!-- Menu / Disabled -->
<script setup lang="ts">
import { MenuRoot, MenuItem } from '@sectile/vue/menu'
const items = [
  { id: 'preview', parentID: null },
  { id: 'deploy', parentID: null },
  { id: 'cancel', parentID: null },
]

</script>

<template>
  <MenuRoot :items="items" :disabled-items="['deploy']">
    <MenuItem value="preview">Preview release</MenuItem>
    <MenuItem value="deploy">Deploy (unavailable)</MenuItem>
    <MenuItem value="cancel">Cancel release</MenuItem>
  </MenuRoot>
</template>

중첩 하위 메뉴

내보내기 명령이 소유한 하위 메뉴에서 파일 형식을 선택합니다.

<!-- Menu / Nested -->
<script setup lang="ts">
import { MenuRoot, MenuItem, MenuSubContent, MenuSeparator } from '@sectile/vue/menu'
import { ref } from 'vue'

const lastAction = ref('')
const items = [
  { id: 'export', parentID: null },
  { id: 'pdf', parentID: 'export' },
  { id: 'markdown', parentID: 'export' },
  { id: 'csv', parentID: 'export' },
  { id: 'share', parentID: null },
]

</script>

<template>
  <MenuRoot :items="items" @invoke="lastAction = $event">
    <MenuItem value="export">Export as ›</MenuItem>
    <MenuSubContent for="export">
      <MenuItem value="pdf">PDF document</MenuItem>
      <MenuItem value="markdown">Markdown</MenuItem>
      <MenuItem value="csv">CSV data</MenuItem>
    </MenuSubContent>
    <MenuSeparator />
    <MenuItem value="share">Share link <kbd>⌘L</kbd></MenuItem>
  </MenuRoot>
  <p v-if="lastAction" role="status">{{ lastAction }} invoked</p>
</template>

Floating 위치

이 컴포넌트는 공통 위치 엔진을 사용합니다. 실시간 위치 예시에서 side, align, 간격, 충돌 경계, strategy, tracking을 바꾸며 계산 결과를 확인할 수 있습니다.

API

Vue 패키지: @sectile/vue/menu

컴포넌트

MenuRoot
MenubarRoot
NavigationMenuRoot
MenuButtonRoot
MenuButtonTrigger
MenuButtonContent
MenuItem
MenuSubContent
MenuSeparator

Props

`MenuRootProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultHighlightedValue: 타입string | null기본값undefined
컴포넌트가 관리하는 처음 강조 값입니다.
disabled: 타입boolean기본값undefined
사용자 조작을 막을지 여부입니다.
disabledItems: 타입readonly string[]기본값undefined
포커스와 선택 대상에서 제외할 항목 값입니다.
items: 타입readonly MenuItemDefinition<string>[]기본값필수
컴포넌트가 관리할 순서 있는 항목 값입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
policies: 타입MenuPolicies<string>기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.
textValue: 타입(id: string) => string기본값undefined
항목 값을 검색 또는 표시 문자열로 바꾸는 함수입니다.

`MenuButtonRootProps`

align: 타입PositionAlign기본값undefined
기준 요소를 중심으로 팝업 내용을 정렬할 위치입니다.
as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
avoidCollisions: 타입boolean기본값undefined
팝업이 화면 안에 남도록 위치를 뒤집거나 이동할지 여부입니다.
collisionBoundary: 타입PositionBoundary기본값undefined
팝업을 화면 안에 유지할 때 사용할 경계입니다.
collisionPadding: 타입PositionPadding기본값undefined
팝업과 충돌 경계 사이에 둘 간격입니다.
defaultHighlightedValue: 타입string | null기본값undefined
컴포넌트가 관리하는 처음 강조 값입니다.
defaultOpen: 타입boolean기본값undefined
컴포넌트가 관리하는 초기 열림 상태입니다.
disabled: 타입boolean기본값undefined
사용자 조작을 막을지 여부입니다.
disabledItems: 타입readonly string[]기본값undefined
포커스와 선택 대상에서 제외할 항목 값입니다.
hideWhenDetached: 타입boolean기본값undefined
기준 요소가 레이아웃에서 벗어나면 팝업을 숨길지 여부입니다.
items: 타입readonly MenuItemDefinition<string>[]기본값필수
컴포넌트가 관리할 순서 있는 항목 값입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
open: 타입boolean기본값undefined
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
policies: 타입MenuPolicies<string>기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.
position: 타입boolean기본값undefined
실행 요소를 기준으로 팝업 위치를 계산할지 여부입니다.
side: 타입PositionSide기본값undefined
기준 요소를 중심으로 팝업을 우선 배치할 방향입니다.
sideOffset: 타입number기본값undefined
팝업과 기준 요소 사이 거리입니다.
strategy: 타입PositionStrategy기본값undefined
기준 요소에 연결된 콘텐츠의 CSS 위치 전략입니다.
textValue: 타입(id: string) => string기본값undefined
항목 값을 검색 또는 표시 문자열로 바꾸는 함수입니다.
tracking: 타입PositionTracking기본값undefined
기준 요소에 연결된 콘텐츠가 열린 동안 위치를 갱신할 방식입니다.

`MenuItemProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
value: 타입string기본값필수
이 계약이 노출하는 현재 값입니다.

`MenuSubContentProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
for: 타입string기본값필수
이 컴포넌트가 연결할 관련 파트의 값 또는 ID입니다.

`MenuPartProps`

as: 타입PrimitiveAs기본값파트별로 다름
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

`MenuRootSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
highlightedValue: 타입string | null
조작 대상으로 강조된 현재 값입니다.
open: 타입boolean
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
openPath: 타입readonly string[]
열린 메뉴 경로의 순서 있는 값입니다.

`MenuItemSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
highlighted: 타입boolean
조작 대상으로 강조된 항목인지 여부입니다.
open: 타입boolean
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

이벤트

`MenuRoot`

invoke: 페이로드string
현재 작업을 실행할 때 발생합니다.
update:open: 페이로드boolean
컴포넌트가 새 열림 상태를 요청할 때 발생합니다.

`MenubarRoot`

invoke: 페이로드string
현재 작업을 실행할 때 발생합니다.
update:open: 페이로드boolean
컴포넌트가 새 열림 상태를 요청할 때 발생합니다.

`NavigationMenuRoot`

invoke: 페이로드string
현재 작업을 실행할 때 발생합니다.
update:open: 페이로드boolean
컴포넌트가 새 열림 상태를 요청할 때 발생합니다.

`MenuButtonRoot`

invoke: 페이로드string
현재 작업을 실행할 때 발생합니다.
update:open: 페이로드boolean
컴포넌트가 새 열림 상태를 요청할 때 발생합니다.

기타 타입

`MenuTextValueResolver`

type MenuTextValueResolver = NonNullable<MenuRootProps['textValue']>

`MenuOpenChangeHandler`

type MenuOpenChangeHandler = NonNullable<InstanceType<typeof MenuRoot>['$props']['onUpdate:open']>

`MenuInvokeHandler`

type MenuInvokeHandler = NonNullable<InstanceType<typeof MenuRoot>['$props']['onInvoke']>

`MenubarOpenChangeHandler`

type MenubarOpenChangeHandler = NonNullable<InstanceType<typeof MenubarRoot>['$props']['onUpdate:open']>

`MenubarInvokeHandler`

type MenubarInvokeHandler = NonNullable<InstanceType<typeof MenubarRoot>['$props']['onInvoke']>

`NavigationMenuOpenChangeHandler`

type NavigationMenuOpenChangeHandler = NonNullable<InstanceType<typeof NavigationMenuRoot>['$props']['onUpdate:open']>

`NavigationMenuInvokeHandler`

type NavigationMenuInvokeHandler = NonNullable<InstanceType<typeof NavigationMenuRoot>['$props']['onInvoke']>

`MenuButtonOpenChangeHandler`

type MenuButtonOpenChangeHandler = NonNullable<InstanceType<typeof MenuButtonRoot>['$props']['onUpdate:open']>

`MenuButtonInvokeHandler`

type MenuButtonInvokeHandler = NonNullable<InstanceType<typeof MenuButtonRoot>['$props']['onInvoke']>

파트

공통 범위: [data-scope="menu"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`item`	`[data-part="item"]`	모든 계층의 메뉴 항목. data-level로 최상위 항목과 중첩 항목을 구분	`data-level="<depth>"`
`sub-content`	`[data-part="sub-content"]`	상위 메뉴 항목이 소유하는 팝업 콘텐츠	`data-level="<depth>"`
`separator`	`[data-part="separator"]`	관련 그룹 사이에 의미 구분선을 표시합니다.	—

키보드 동작

키	동작
`Arrow Up` / `Arrow Down`	현재 메뉴 단계의 항목 사이를 이동합니다.
`Arrow Right` / `Arrow Left`	하위 메뉴를 열거나 상위 메뉴로 돌아갑니다.
`Home` / `End`	현재 단계의 첫 번째 또는 마지막 항목으로 이동합니다.
`Enter` / `Space`	하위 메뉴를 열거나 현재 항목을 실행합니다.
`Escape`	현재 메뉴 단계를 닫습니다.

접근성

메뉴 항목, 구분선, 하위 메뉴 상태가 계층형 메뉴 의미와 이동 포커스를 사용합니다.

관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.

Menu ​

용법 ​

명령 목록 ​

비활성 항목 ​

중첩 하위 메뉴 ​

Floating 위치 ​

API ​

Props ​

MenuRootProps ​

MenuButtonRootProps ​

MenuItemProps ​

MenuSubContentProps ​

MenuPartProps ​

슬롯 ​

MenuRootSlotProps ​

MenuItemSlotProps ​

이벤트 ​

MenuRoot ​

MenubarRoot ​

NavigationMenuRoot ​

MenuButtonRoot ​

기타 타입 ​

MenuTextValueResolver ​

MenuOpenChangeHandler ​

MenuInvokeHandler ​

MenubarOpenChangeHandler ​

MenubarInvokeHandler ​

NavigationMenuOpenChangeHandler ​

NavigationMenuInvokeHandler ​

MenuButtonOpenChangeHandler ​

MenuButtonInvokeHandler ​

파트 ​

키보드 동작 ​

접근성 ​

용법