Menubar

Desktop-style menu bar (File, Edit, View).

Roughness1.5Lock seedAnimate

<Menubar roughness={1.5}>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

CLI install

npx doodleui-react add menubar

Usage

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "doodleui-react";

<Menubar>\n  <MenubarMenu>\n    <MenubarTrigger>File</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>New</MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n</Menubar>

Props

Prop	Type	Default	Notes
animate	boolean	true	Draw-in menu panels when opened. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.