Menubar
Coordinates application menus with desktop-style keyboard navigation.
Contract
| Decision | Choose |
|---|---|
| composition | render TRMenu.Root children inside one TRMenubar |
| orientation | horizontal uses Left/Right; vertical uses Up/Down |
| availability | disable one TRMenu.Root, or disable the whole menubar |
| boundary | loopFocus wraps at the ends; default true |
Use a menubar for persistent application commands, not site navigation.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/menubar.css';Scroll inside the code area to read long lines.
Imports
import { TRMenubar } from '@tinyrack/ui/components/menubar';
import { TRMenu } from '@tinyrack/ui/components/menu';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Set availability
Choose navigation direction
Choose boundary behavior
API
TRMenubar accepts Base UI root props. orientation is 'horizontal' | 'vertical' with default 'horizontal'; loopFocus is boolean with default true; disabled is boolean with default false. Give the root an accessible name. It maintains one roving tab stop, skips disabled child menus, switches an open menu as focus moves, and restores trigger focus after Escape.
Compose TRMenu.Root children and their overlay anatomy from @tinyrack/ui/components/menu. Base UI render, root ref, native props, events, functional className / style, and state data attributes are preserved. @tinyrack/ui/components/menubar.css includes the styles for the composed menu parts; do not import menu CSS separately.
TRMenubar, TRMenubarProps, and TRMenubarState are exported from @tinyrack/ui/components/menubar.