Navigation Menu

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

링크와 하위 내비게이션을 제품, 문서, 섹션별로 그룹화하세요. 네이티브 nav, ul, li, a 구조를 유지합니다. Trigger가 하위 링크를 열고, Link가 이동합니다. Link.active로 현재 목적지를 표시하세요. 세로 목록은 목차로도 씁니다. 지금 보이는 섹션은 aria-current="location"으로 표시하면 현재 페이지와 같이 그려지고, 줄바꿈된 라벨도 위아래 여백을 유지합니다. 휴대폰처럼 페이지 탭이 다 들어가지 않을 수 있으면 overflow='scroll'을 주세요. 목록이 한 줄로 남아 옆으로 스크롤하고, 현재 링크는 화면 안에 머뭅니다.

명령에는 Menu나 Menubar를, 한 화면에서 패널 전환에는 Tabs를 사용하세요. 링크는 네이티브로 유지하고 nav에 role=menu를 주지 마세요. 호버 전용으로 만들지 마세요. 작은 화면에서도 클릭과 키보드 경로를 제공하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root(nav) → List(ul) → Item(li) → Trigger + Content; Portal → Positioner → Popup(nav) → Viewport

키보드와 접근성

• Trigger의 하위 링크가 열리면 Tab으로 그 안으로 이동합니다. Tab과 화살표 키로 하위 링크를 이동합니다.
• 화살표 키는 최상위 항목 사이를 이동합니다. 가로 레이아웃에서는 ArrowDown이 Trigger의 하위 링크도 엽니다.
• Enter나 Space는 Trigger의 하위 링크를 엽니다. 하위 링크의 Enter는 이동합니다.
• Escape는 하위 링크를 닫습니다.
• RTL에서는 DirectionProvider와 DOM dir을 모두 설정하세요.
• 세로 레이아웃에서는 orientation=vertical을 설정하세요. 의미와 레이아웃이 모두 바뀝니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { NavigationMenu } from '@surflane/ui'

<NavigationMenu.Root aria-label='Platform navigation'>
  <NavigationMenu.List>
    <NavigationMenu.Item value='products'>
      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <NavigationMenu.Link href='/workspace' active closeOnClick>
          Workspace
        </NavigationMenu.Link>
        <NavigationMenu.Link href='/docs' closeOnClick>
          Documentation
        </NavigationMenu.Link>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
  </NavigationMenu.List>
  <NavigationMenu.Portal>
    <NavigationMenu.Positioner
      align='start'
      sideOffset={8}
      collisionPadding={12}
    >
      <NavigationMenu.Popup aria-label='Product destinations'>
        <NavigationMenu.Viewport />
      </NavigationMenu.Popup>
    </NavigationMenu.Positioner>
  </NavigationMenu.Portal>
</NavigationMenu.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰