컴포넌트
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
@layer theme, base, components, utilities;
@layer components.ply-base, components.ply;
@layer components.ply {
/* Menubar: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-menubar {
display: flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--rbx-color-stroke-default);
border-radius: 8px;
min-width: 0;
max-width: 100%;
overflow-x: auto;
}
.rbx-menubar > * {
flex-shrink: 0;
}
.rbx-menubar[data-orientation="vertical"] {
flex-direction: column;
}
.rbx-menubar :focus-visible {
outline-offset: -3px;
}
}