StaggeredMenu
staggered-menuOpens a token-themed layered side panel with staggered links, numbering, social actions, and reduced-motion behavior.
Usage
Basic usage
Put it into the container of relative + fixed height + overflow-hidden, and click the button in the upper right corner to bring up the slide-in panel on the right.
<div className="relative h-96 overflow-hidden rounded-xl border border-border">
<StaggeredMenu
items={[
{ label: "Home", link: "#home" },
{ label: "Product", link: "#product" },
{ label: "Plan", link: "#solution" },
{ label: "About", link: "#about" },
]}
socialItems={[
{ label: "GitHub", link: "https://github.com" },
{ label: "Zhihu", link: "https://zhihu.com" },
]}
/>
</div>Slide in on the left + Custom brand
position="left" Let the panel and color layer slide in from the left, and brand slots to customize the brand text in the upper left corner.
<StaggeredMenu
position="left"
brand="HULIAN"
items={items}
socialItems={socialItems}
/>Custom color layers and accent colors
colors controls the staggered color layer behind it, and accentColor affects the serial number/social title/entry hover color.
<StaggeredMenu
items={items}
socialItems={socialItems}
colors={["var(--color-chart-3)", "var(--color-chart-1)"]}
accentColor="oklch(0.72 0.22 30)"
/>Simplified: No serial number, no social area
displayItemNumbering and displaySocials are set to false, leaving only the main entry.
<StaggeredMenu
items={items}
displayItemNumbering={false}
displaySocials={false}
/>When to use
Use StaggeredMenu for a dramatic fullscreen or full-container side menu on a brand site or portfolio. Use PillNav or GooeyNav for persistent horizontal navigation, and NavigationMenu or Menu for functional dropdowns. In non-fixed mode, mount it in a relative, fixed-height, overflow-hidden container.
Import
import { StaggeredMenu } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | StaggeredMenuItem[] | — | Primary entries; an empty array displays “No items.” |
| socialItems | StaggeredMenuSocial[] | — | Footer social links used with displaySocials. |
| position | "left" | "right" | "right" | Panel and color-layer side. |
| colors | string[] | chart-4 / chart-1 layers | Up to four staggered background-layer colors. |
| displaySocials | boolean | true | Shows the footer only when socialItems is non-empty. |
| displayItemNumbering | boolean | true | Adds 01, 02, and similar prefixes. |
| accentColor | string | var(--color-primary) | Numbering, social heading, and hover color. |
| isFixed | boolean | false | Fixed viewport overlay or absolute parent-filling layer. |
| closeOnClickAway | boolean | true | Whether outside interaction closes the panel. |
| className | string | — | Root class name. |
| style | CSSProperties | — | Root inline styles. |
StaggeredMenuItem is { label; link?; ariaLabel? }; without link it renders a span. StaggeredMenuSocial is { label; link }.
Events
| Event | Type | Description |
|---|---|---|
| onMenuOpen | () => void | Called after opening. |
| onMenuClose | () => void | Called after closing. |
Slots
| Slot | Type | Description |
|---|---|---|
| brand | ReactNode | Brand beside the trigger. Built-in Chinese "\u745a\u740f" means “Hulian.” |
Example
<div className="relative h-96 overflow-hidden rounded-xl border border-border bg-bg">
<StaggeredMenu items={[{ label: "Home", link: "#home" }, { label: "Product", link: "#product" }, { label: "About", link: "#about" }]} socialItems={[{ label: "GitHub", link: "https://github.com" }]} />
</div>Fullscreen from the left:
<StaggeredMenu isFixed position="left" items={items} socialItems={socials} brand="HULIAN" />Usage guidelines
- Non-fixed mode requires a relative, fixed-height, overflow-hidden parent.
- displaySocials needs non-empty socialItems.
- Pass colors as
var(--color-chart-*); bare primary variables can fail in SVG or canvas color contexts. - Reduced motion shows entries directly. Toggle labels use built-in Chinese
"\u5173\u95ed\u83dc\u5355"(“Close menu”) and"\u6253\u5f00\u83dc\u5355"(“Open menu”). - The trigger's two visible states are built-in Chinese
"\u83dc\u5355"(“Menu”) and"\u5173\u95ed"(“Close”); the social section heading is"\u793e\u4ea4"(“Social”).
Related
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Menubar
Playground
<div className="relative h-96 overflow-hidden rounded-xl border border-border">
<StaggeredMenu
position="right"
displayItemNumbering={true}
displaySocials={true}
items={[{ label: "Home", link: "#home" }, { label: "Product", link: "#product" }]}
socialItems={[{ label: "GitHub", link: "https://github.com" }]}
/>
</div>