Menubar

import { Menubar } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
children	React.ReactNode	yes
onSelect	(event: React.SyntheticEvent) => void	—
value	string	—	Value of the open menu, controlled. Pair with onValueChange.
defaultValue	string	—	Value of the menu open on mount, uncontrolled.
onValueChange	(value: string) => void	—
className	string	—

Example

This is the example the design-system sync renders and verifies for this component.

import { Menubar, MenubarMenu, MenubarTrigger } from "@rebasepro/ui";

// A believable admin-console menu bar: File / Edit / View / Help over
// tables, SQL queries and RLS policies.
export const Closed = () => (
    <div className="p-4">
        <Menubar>
            <MenubarMenu>
                <MenubarTrigger>File</MenubarTrigger>
            </MenubarMenu>
            <MenubarMenu>
                <MenubarTrigger>Edit</MenubarTrigger>
            </MenubarMenu>
            <MenubarMenu>
                <MenubarTrigger>View</MenubarTrigger>
            </MenubarMenu>
            <MenubarMenu>
                <MenubarTrigger>Help</MenubarTrigger>
            </MenubarMenu>
        </Menubar>
    </div>
);