Atelier UI

Search components…

Search components…

Fullscreen Menu

A full-screen navigation overlay with a morphing hamburger, staggered links, scroll lock and focus trap.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

FullscreenMenuProps

Also accepts all props of Omit<React.ComponentProps<"div">, "children">

PropTypeDefaultDescription
links* requiredFullscreenMenuLink[]——
secondaryLinksFullscreenMenuLink[][]—
labelstring"Site navigation"Accessible name of the overlay
footerReact.ReactNode—Small text shown at the bottom of the overlay
onOpenChange(open: boolean) => void——

Install

$ npx shadcn@latest add https://chromotion.dev/r/fullscreen-menu.json

More like this