Push Down Overlay Menu
The menu does not sit on top of the page, it pushes it. Opening drives the whole document down a full viewport while the panel wipes in from the top edge and its own content slides down from half a screen above, so the two read as one sheet. Every line of menu copy is masked and dropped in with a negative stagger, and the hamburger folds into a cross on the same custom ease. GSAP CustomEase and SplitText with Lenis.
npx shadcn@latest add https://ui.aryank.space/r/push-down-overlay-menu.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| links / tags | string[] | BLANK menu columns | Primary navigation and the secondary discipline list beside it. |
| location / contactLines | string / string[] | BLANK contact block | The panel footer. |
| bannerImage / menuImage | string | Blob-hosted images | Page banner and the dimmed plate inside the panel. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
links / tagstextThe two menu columns.
heroHeading / outroHeadingtextHeadlines on the pushed page.
gsaplenis