Browse components
Staggered Menu
Menu button that sweeps staggered colored layers across the screen before a panel of oversized links rises into place.
Installation
npx shadcn@latest add @glint-ui/staggered-menuFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/staggered-menu.json
Usage
import { StaggeredMenu } from "@/components/ui/staggered-menu";
<StaggeredMenu
logo={<span>forma.</span>}
items={[
{ label: "Work", href: "/work" },
{ label: "Studio", href: "/studio" },
{ label: "Contact", href: "/contact" },
]}
socials={[{ label: "Instagram", href: "https://instagram.com" }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, href }. |
| socials | ReactNode | — | Small links at the bottom of the panel. |
| logo | ReactNode | — | Brand shown at the top left. |
| layerColors | string[] | ["#c6ff3d","#5b3df5"] | Colors of the layers that sweep in before the panel. |
| accentColor | string | "#5b3df5" | Numbers, hover and icon color. |
| side | "right" | "left" | "right" | Edge the panel slides in from. |
| numbered | boolean | true | Show 01, 02… next to each link. |
| stagger | number | 0.08 | Seconds between each layer and link. |
| position | "fixed" | "absolute" | "fixed" | `absolute` renders inside the nearest positioned parent. |
| defaultOpen | boolean | false | Start open. |
| onOpenChange | ReactNode | — | (open: boolean) => void |
| className | string | — | Extra classes for the root element. |