Menubar

미리보기

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

사용법

애플리케이션 명령을 Run, View, Help 같은 메뉴로 그룹화하세요. 각 메뉴는 공유 Menu 파트를 재사용합니다: Item, CheckboxItem, RadioItem, 하위 메뉴, LinkItem.

사이트의 기본 내비게이션이나 단순 링크 목록에는 NavigationMenu나 네이티브 nav를 사용하세요. Menu.Trigger 안에 다른 버튼을 중첩하지 마세요. 그런 명령은 Menu.Item으로 추가하세요.

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

구성

Menubar(role=menubar) → Menu.Root(Trigger + Portal/Content(Item/CheckboxItem/RadioItem/Submenu))

키보드와 접근성

• 화살표 키는 메뉴 트리거 사이를 이동합니다.
• Enter나 Space, 또는 메뉴 방향 화살표 키가 메뉴를 엽니다.
• Base UI가 열린 메뉴 사이 이동, Escape로 닫기, 트리거로 포커스 복귀, 하위 메뉴 화살표 키를 처리합니다.
• 방향을 DirectionProvider와 DOM dir에 맞게 유지하세요.
• Base UI 1.9는 초기 방향을 메뉴 모델에 저장합니다. 런타임에 방향이 바뀌면 Menubar에 orientation 기반 키를 주어 다시 마운트되게 하세요.
• 메뉴 선택 값을 부모에서 제어하세요.

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

예시 코드

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

import { Menubar, Menu } from '@surflane/ui'

<Menubar aria-label='Deployment commands' modal={false}>
  <Menu.Root>
    <Menu.Trigger>Run</Menu.Trigger>
    <Menu.Portal>
      <Menu.Content align='start'>
        <Menu.Item onClick={preparePreview}>New preview</Menu.Item>
        <Menu.Item disabled>Delete runs</Menu.Item>
      </Menu.Content>
    </Menu.Portal>
  </Menu.Root>
</Menubar>

주요 API

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

관련 토큰