Navigation Menu
Horizontal navigation with sketch dropdown panels.
<NavigationMenu roughness={1.5}>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Product</NavigationMenuTrigger>
<NavigationMenuContent>...</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>CLI install
npx doodleui-react add navigation-menu
Usage
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent } from "doodleui-react";
<NavigationMenu>\n <NavigationMenuList>\n <NavigationMenuItem>\n <NavigationMenuTrigger>Product</NavigationMenuTrigger>\n <NavigationMenuContent>...</NavigationMenuContent>\n </NavigationMenuItem>\n </NavigationMenuList>\n</NavigationMenu>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| animate | boolean | true | Draw-in dropdown panels and indicator. 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. |