컴포넌트
Menubar
여러 메뉴를 가로로 배치합니다.
설치
pnpm dlx ply-ui add menubar menu공통 설치 설정을 먼저 적용합니다.
사용법
여러 Menu를 가로로 묶는 상위 영역입니다. 각 Menu는 독립적인 Trigger와 Popup을 가지며, Menubar는 메뉴 사이의 키보드 이동을 담당합니다.
구현 코드
components/ui/menubar.tsx
"use client";
import type { ComponentProps } from "react";
import { Menubar as Primitive } from "@base-ui/react/menubar";
import { withClassName } from "../../lib/cx";
import "./menubar.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
export function Menubar({
className,
...props
}: ComponentProps<typeof Primitive>) {
return (
<Primitive {...props} className={withClassName("rbx-menubar", className)} />
);
}
components/ui/menubar.css
/* Menubar: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-menubar {
display: flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--rbx-color-stroke-default);
border-radius: 8px;
}