Fold NavBar

Fold NavBar
Fold NavBar

About Fold NavBar

Fold Nav is a premium expandable navigation component for Framer designed for portfolios, agencies, studios, SaaS websites and modern landing pages. It starts as a compact floating menu and unfolds into a beautifully structured navigation panel with smooth motion, numbered links, descriptions and a prominent CTA.

The layout adapts fluidly across desktop, tablet and mobile. On smaller screens, Fold Nav expands into a comfortable near-full-width panel with large touch targets and an internally scrollable layout when screen height is limited.

Features:

  • Compact closed navigation state

  • Smooth folding open/close animation

  • Staggered navigation reveal

  • Responsive desktop, tablet and mobile layouts

  • Active and hover navigation states

  • Optional link descriptions

  • Optional section numbers

  • Premium CTA button

  • Escape key support

  • Internal scrolling on short screens

  • Left or right positioning

  • Reduced-motion accessibility support

  • Dedicated Framer static-renderer fallback

Editable properties:

  • Brand name and link

  • Navigation labels, links and descriptions

  • CTA text and destination

  • Accent and surface colors

  • Active surface color

  • Text, muted and border colors

  • Glass effect and blur

  • Closed and expanded panel widths

  • Border radius

  • Top and side offsets

  • Panel padding

  • Animation speed

  • Stagger timing

  • Show/hide numbers and descriptions

Fold Nav gives designers a polished alternative to a traditional navbar while remaining highly customizable directly inside Framer.

From Saira Fayyaz

The Mega Menu
Arc NavBar
Rail NavBar
Command Deck

Related Components

Liquid Glass Nav Pro
Liquid Pill Navbar
Morphing Dock Navbar
Premium SaaS Navbar