PRO

Sliding Index Menu

A full-screen menu that wipes up from the bottom edge and hands the page over to an oversized link index. The whole rail slides horizontally against the pointer so moving right pulls the far links into reach, and an accent bar chases whichever link is hovered, easing its position and its width at once. Each link swaps to a duplicate copy on a per-character roll. GSAP SplitText with Lenis.

Component

BLANK

Shoreline Drive

Oslo


Edition

Vol. 03


Contact

[email protected]


Direct

+47 1234 567890

Instagram

Are.na

Vimeo



Language

Norsk



Credits

Imprint

Ref. 00492X

Shaping Ideas

Install
npx shadcn@latest add https://ui.aryank.space/r/sliding-index-menu.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
linksstring[]Index, Persona, Biography, Work, JournalIndex entries. Each renders twice so the hover roll has a copy to swap in.
leftColumn / rightColumnstring[]BLANK contact and creditsInfo columns beside the plate. Empty strings become spacing breaks.
menuImagestringBlob-hosted plateThe centered image that scales up when the menu opens.
accentstring#fca311Highlighter bar color.
Customize
linkstext

The oversized index entries.

leftColumn / rightColumntext

The two info columns. An empty string renders as a spacer line.

accentcolor

The highlighter bar color.

Dependencies
gsaplenis