Layered menu

A burger that opens a full-frame menu of four coloured panels dropping in turn.

Behaviour

Reduced motion: the panels and links fade, nothing slides or blurs.
Four panels drop from the top in turn; the front one carries the links, which fade up out of a blur one after another.
The burger turns into an X and a Close label slides in; both are cream over the panels (`activeColor`) and take `color` while shut. Closing runs the panels back up, front one first.
Escape or picking a link closes it (the Escape is the menu's: a dialog around it stays open). Focus moves into the menu and returns to the burger; Tab stays inside while it is open.
Locks page scroll while open (not when contained). The front panel is a dialog.
The layout follows the width of the frame it fills, not the screen: two columns from 48rem, one below.

Props

Prop	Type	Description
primary	`MenuLink[]`	The big links on the right. A link is { label, href }.
secondary	`MenuLink[]`default `[]`	The smaller list on the left.
legal	`MenuLink[]`default `[]`	Small print under the secondary list; hidden when the menu is narrower than 48rem.
colors	`[string, string, string, string]`default `Armour's four`	Panel colours, back to front. The last one carries the links.
logo	`ReactNode`	Centred at the top of the open menu.
color	`string`default `#F4F1DE`	Burger and Close colour while the menu is shut: set it to suit the page behind.
activeColor	`string`default `#F4F1DE`	Their colour while the menu is open, over the panels.
contained	`boolean`default `false`	Fill the nearest relative parent instead of the screen.
defaultOpen	`boolean`default `false`	Start open.
open	`boolean`	Controlled state, with onOpenChange.
delay	`number`default `1.62`	Seconds before the burger lines draw in on first paint.
className	`string`	Classes for the burger button's position.

Installation

npx shadcn@latest add https://purrfectui.com/r/layered-menu.json

How to use

import { LayeredMenu } from "@/components/ui/layered-menu";

<section className="relative h-screen">
  <LayeredMenu
    logo="ARMOUR"
    primary={[{ label: "Experience", href: "#experience" }]}
    secondary={[{ label: "FAQ", href: "#faq" }]}
  />
</section>

Source code

Loading…

Credits

Ported from armour.vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.