MenuBar
NavigationHorizontal application menu bar (File / Edit / View…).
Application-level menu bar where each entry opens a dropdown. Active trigger shows a bottom accent line. Composed from MenuBarMenu, MenuBarTrigger, MenuBarContent, MenuBarItem, MenuBarCheckboxItem, MenuBarRadioGroup, MenuBarRadioItem, MenuBarSeparator, MenuBarLabel.
Usage
import { MenuBar, MenuBarMenu, MenuBarTrigger, MenuBarContent, MenuBarItem } from "nosible-ux"
export default function Example() {
return (
<MenuBar>
<MenuBarMenu>
<MenuBarTrigger>Signals</MenuBarTrigger>
<MenuBarContent>
<MenuBarItem>New alert</MenuBarItem>
<MenuBarItem>Import list</MenuBarItem>
</MenuBarContent>
</MenuBarMenu>
<MenuBarMenu>
<MenuBarTrigger>View</MenuBarTrigger>
<MenuBarContent>
<MenuBarItem>Table</MenuBarItem>
<MenuBarItem>Chart</MenuBarItem>
</MenuBarContent>
</MenuBarMenu>
</MenuBar>
)
}Examples
With radio group
Accessibility
Built on Radix Menubar: arrow key navigation between top-level triggers, dropdown keyboard management, and full ARIA roles are handled.
Props
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | — | |
defaultValue | string | undefined | — | |
dir | Direction | undefined | — | |
loop | boolean | undefined | — | |
onValueChange | ((value: string) => void) | undefined | — | |
value | string | undefined | — |