NavigationMenu
사이트 수준 링크와 선택 사항인 풍부한 플라이아웃 콘텐츠를 제공해요.
핵심 속성
| 판단 기준 | 선택 방법 |
|---|---|
| 목적지 | 직접 이동은 Link, 관련 링크 묶음은 Trigger와 Content를 써요. |
| 방향 | horizontal이나 vertical을 쓰며 기본값은 horizontal이에요. |
| 위치 | side는 top/right/bottom/left, align은 start/center/end 중에서 골라요. |
| 좁은 화면 | 같은 목적지를 담은 드로어로 데스크톱 합성을 교체해요. |
작업 중심 플라이아웃을 만들고 바로 이동할 목적지는 링크로 유지해요. 사이트 탐색용이며 애플리케이션 명령 메뉴 막대가 아니에요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/navigation-menu.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRNavigationMenu } from '@tinyrack/ui/components/navigation-menu';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
목적지 상태를 표시해요
탐색 방향을 골라요
플라이아웃을 배치해요
좁은 화면에서도 목적지를 유지해요
키보드 모델을 따라요
API
전체 파트는 Root, List, Item, Trigger, Icon, Content, Portal, Backdrop, Positioner, Popup, Arrow, Viewport, Link예요. 모든 파트와 prop·상태 타입을 이름으로 내보내요.
Root는 value와 onValueChange를 쓰는 제어 상태, defaultValue를 쓰는 비제어 상태, orientation, 포인터 delay, closeDelay를 소유해요. Trigger는 비활성화할 수 있어요. Icon은 기본으로 ChevronDown을 렌더링하고 사용자 지정 자식을 받아요. Link.active는 aria-current="page"를 설정하고 closeOnClick은 플라이아웃을 닫아요.
Positioner.side는 top, right, bottom, left를 받고 align은 start, center, end를 받아요. sideOffset 기본값은 8이에요. 충돌 회피는 정렬을 옮기고 방향을 뒤집어요. Portal은 사용자 지정 컨테이너를 받고, Popup은 표면을 소유하며 Viewport는 활성 Content를 받아요.
공개 CSS 경로를 가져오세요. 토큰에는 --tr-navigation-menu-popup-max-width가 있어요. 합성은 SSR과 하이드레이션을 지원하고 포털 콘텐츠는 하이드레이션 뒤 컨테이너에 마운트해요. 좁은 화면에서는 데스크톱 키보드 모델을 압축하지 말고 같은 목적지를 터치 크기 드로어에 렌더링해요.