Navigation 1 is a corner hamburger toggle that springs open into a full screen violet menu: oversized links stagger in, social icons settle in the footer, and a contact CTA closes the composition. Links and socials are props. Built with Framer Motion and React. A bold choice for portfolios and studio sites that want the menu itself to be memorable.
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 { CornerNav } from "@/components/pro/blocks/navigation-1";<CornerNav
links={[
{ title: "home", href: "#" },
{ title: "features", href: "#" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
links | CornerNavLink[] | 4 default links | Nav links rendered as oversized staggered text. |
socials | CornerNavSocial[] | X, Instagram, LinkedIn, YouTube | Social icon links in the menu footer. |