<!-- Navigation Menu / Product -->
<script setup lang="ts">
import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuViewport, NavigationMenuLink } from '@sectile/vue/navigation-menu'
const items = [
  { id: 'products', parentID: null },
  { id: 'releases', parentID: 'products' },
  { id: 'open-source', parentID: 'products' },
  { id: 'docs', parentID: null },
]

</script>

<template>
  <NavigationMenuRoot :items="items" label="Product navigation" v-slot="{ openPath }">
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger value="products" as="button">Products</NavigationMenuTrigger>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink value="docs" as="a" href="/docs">Documentation</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
    <NavigationMenuViewport v-show="openPath.includes('products')">
      <NavigationMenuContent for="products">
        <NavigationMenuLink value="releases" as="a" href="/releases">New releases</NavigationMenuLink>
        <NavigationMenuLink value="open-source" as="a" href="/open-source">Open source</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuViewport>
  </NavigationMenuRoot>
</template>

링크 이동

복합 메뉴 실행 요소와 함께 써도 링크의 기본 이동 동작을 유지합니다.

<!-- Navigation Menu / Links -->
<script setup lang="ts">
import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuViewport, NavigationMenuLink } from '@sectile/vue/navigation-menu'
const items = [
  { id: 'resources', parentID: null },
  { id: 'guides', parentID: 'resources' },
  { id: 'api', parentID: 'resources' },
  { id: 'github', parentID: null },
]

</script>

<template>
  <NavigationMenuRoot :items="items" label="Developer resources" v-slot="{ openPath }">
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger value="resources" as="button">Resources</NavigationMenuTrigger>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink value="github" as="a" href="https://github.com/sectile">GitHub</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
    <NavigationMenuViewport v-show="openPath.includes('resources')">
      <NavigationMenuContent for="resources">
        <NavigationMenuLink value="guides" as="a" href="/guide">Guides</NavigationMenuLink>
        <NavigationMenuLink value="api" as="a" href="/api">API reference</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuViewport>
  </NavigationMenuRoot>
</template>

비활성 항목

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

<!-- Navigation Menu / Disabled -->
<script setup lang="ts">
import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuLink } from '@sectile/vue/navigation-menu'
const items = [
  { id: 'profile', parentID: null },
  { id: 'billing', parentID: null },
]

</script>

<template>
  <NavigationMenuRoot :items="items" :disabled-items="['billing']" label="Account navigation">
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuLink value="profile" as="a" href="/profile">Profile</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink value="billing" as="span">Billing unavailable</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenuRoot>
</template>

API

Vue 패키지: @sectile/vue/navigation-menu

컴포넌트

NavigationMenuRoot
NavigationMenuLink
NavigationMenuTrigger
NavigationMenuContent
NavigationMenuList
NavigationMenuItem
NavigationMenuViewport
NavigationMenuIndicator

Props

`NavigationMenuItemProps`

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

`NavigationMenuRootProps`

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
항목 값을 검색 또는 표시 문자열로 바꾸는 함수입니다.

`NavigationMenuContentProps`

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

슬롯

`NavigationMenuItemSlotProps`

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

`NavigationMenuRootSlotProps`

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

이벤트

`NavigationMenuRoot`

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

파트

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

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`list`	`[data-part="list"]`	컴포넌트 항목을 탐색 순서대로 묶습니다.	—
`item-container`	`[data-part="item-container"]`	최상위 항목과 중첩 콘텐츠를 함께 배치합니다.	—
`item`	`[data-part="item"]`	모든 계층의 메뉴 항목. data-level로 최상위 항목과 중첩 항목을 구분	`data-level="<depth>"`
`sub-content`	`[data-part="sub-content"]`	상위 메뉴 항목이 소유하는 팝업 콘텐츠	`data-level="<depth>"`
`viewport`	`[data-part="viewport"]`	현재 보이는 콘텐츠를 배치하고 경계를 정합니다.	—
`indicator`	`[data-part="indicator"]`	주요 콘텐츠와 나란히 상태나 위치를 표시합니다.	—

키보드 동작

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

접근성

기본 링크 의미를 유지하고 펼침 실행 요소가 복합 패널의 열림 상태를 노출합니다.

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

Navigation Menu

용법

제품 이동 메뉴

링크 이동

비활성 항목

API

Props

`NavigationMenuItemProps`

`NavigationMenuRootProps`

`NavigationMenuContentProps`

슬롯

`NavigationMenuItemSlotProps`

`NavigationMenuRootSlotProps`

이벤트

`NavigationMenuRoot`

파트

키보드 동작

접근성

Navigation Menu ​

용법 ​

제품 이동 메뉴 ​

링크 이동 ​

비활성 항목 ​

API ​

Props ​

NavigationMenuItemProps ​

NavigationMenuRootProps ​

NavigationMenuContentProps ​

슬롯 ​

NavigationMenuItemSlotProps ​

NavigationMenuRootSlotProps ​

이벤트 ​

NavigationMenuRoot ​

파트 ​

키보드 동작 ​

접근성 ​

Navigation Menu

용법

제품 이동 메뉴

링크 이동

비활성 항목

API

Props

`NavigationMenuItemProps`

`NavigationMenuRootProps`

`NavigationMenuContentProps`

슬롯

`NavigationMenuItemSlotProps`

`NavigationMenuRootSlotProps`

이벤트

`NavigationMenuRoot`

파트

키보드 동작

접근성