Navigation 6 is a column of thin fixed lines down the edge of the viewport that stretch toward the cursor with springs; hovering one expands it into a labeled nav link. Line count and link positions are props, so the density is yours to tune. Built with Framer Motion and React. An unusual, elegant side navigation for portfolios and art directed sites.
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 { SideStaggerNavigation } from "@/components/pro/blocks/navigation-6";<SideStaggerNavigation
links={[
{ position: 1, title: "Home" },
{ position: 8, title: "About" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
links | SideStaggerLink[] | 4 default links | Links with a position (1-based line index) and title. |
totalLines | number | 30 | Number of lines in the side column. |
className | string | — | Classes for the fixed nav element. |