Staggered Menu

Pro

A menu that sweeps in as colored layers, then reveals big numbered links one by one.

Halden Studio

We build calm software for busy teams.

Open the menu. Tab stays inside it and Escape closes it.

Customize

Side

Layers

Numbers

Installation

Staggered Menu is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy staggered-menu.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { StaggeredMenu } from "@/components/ui/staggered-menu";

<StaggeredMenu
  logo="Halden"
  items={[
    { label: "Work", href: "/work" },
    { label: "Services", href: "/services" },
    { label: "Contact", href: "/contact" },
  ]}
  socials={[{ label: "Dribbble", href: "https://dribbble.com" }]}
  onNavigate={(href) => router.push(href)}
/>

Props

14 properties

Property	Type	Default	Description
items	{ label, href }[]	—	Menu links, rendered as an ordered list.
socials	{ label, href }[]	[]	Small links under the menu.
footer	ReactNode	—	Small print at the bottom of the panel.
position	"left" \| "right"	"right"	Side the panel sweeps in from.
colors	string[]	["#ffa585", "#ff784f"]	Layers that sweep in ahead of the panel, first to last.
accent	string	"#ff784f"	Hover and numbering color.
numbered	boolean	true	Show 01, 02… next to each item. The list itself is an ordered list.
open	boolean	—	Open state, for controlled use.
onOpenChange	(open: boolean) => void	—	Called when the menu opens or closes.
logo	ReactNode	—	Shown at the top of the panel.
panelWidth	string	"min(100%, 30rem)"	CSS width of the panel.
container	HTMLElement \| null	document.body	Portal target. An element keeps the menu inside it; null waits until it exists.
onNavigate	(href, event) => void	—	Called on a plain left click with the default navigation prevented. The menu closes either way.
className	string	—	Extra classes for the toggle button.

Dependencies: motion