MenubarContent

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

Props

Prop	Type	Required	Description
children	React.ReactNode	yes
className	string	—
onSelect	(event: React.SyntheticEvent) => void	—
align	"center" | "end" | "start"	—
sideOffset	number	—
alignOffset	number	—

Example

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

export const Basic = () => {
    const ref = React.useRef<HTMLDivElement>(null);
    useOpenMenu(ref, 0);
    return (
        <div ref={ref} className="p-4 h-[280px]">
            <Menubar>
                <MenubarMenu>
                    <MenubarTrigger>File</MenubarTrigger>
                    <MenubarPortal>
                        <MenubarContent>
                            <MenubarItem>New table<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
                            <MenubarItem>New SQL query<MenubarShortcut>⌘⇧N</MenubarShortcut></MenubarItem>
                            <MenubarItem>Save<MenubarShortcut>⌘S</MenubarShortcut></MenubarItem>
                            <MenubarSeparator/>
                            <MenubarItem disabled>Close project</MenubarItem>
                        </MenubarContent>
                    </MenubarPortal>
                </MenubarMenu>
                <MenubarMenu>
                    <MenubarTrigger>Edit</MenubarTrigger>
                </MenubarMenu>
            </Menubar>
        </div>
    );
};

// align="end" — content hangs from the right edge of its trigger instead
// of the left, useful for a trigger near the bar's right edge.