Navigation 3 slides a full screen nav into place with a liquid reveal: the panel's 50vw border radius unwinds as it enters, and oversized links stagger in behind it. Open state can be controlled or left to the component. Built with Framer Motion and React. A distinctive menu for creative sites that want motion with personality.
Installation
Install dependencies.
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Usage
import { LiquidSideNav } from "@/components/pro/blocks/navigation-3";const [open, setOpen] = useState(false);
<LiquidSideNav open={open} setOpen={setOpen} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | LiquidSideNavItem[] | 4 default items | Nav links rendered as oversized staggered text. |
open | boolean | false | Controlled open state. Falls back to internal state when omitted. |
setOpen | (open: boolean) => void | — | Controlled open state setter. |
trigger | ReactNode | default menu button | Custom element that opens the nav. |