---
title: "Two-Stage Expand Nav — Free Framer component · Best of Framer"
description: "Free Framer component · by Val Casanova · Navigation. Expanding Navigation Component"
canonical: "https://framer.elliotli.dev/component/two-stage-expand-nav"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Two-Stage Expand Nav

# Two-Stage Expand Nav

Expanding Navigation Component

[View on Framer](https://framer.com/marketplace/components/two-stage-expand-nav/?via=elliot-li)

![Two-Stage Expand Nav preview image 1](https://framer.elliotli.dev/og/component/two-stage-expand-nav/ccd92b64382a3acd/1600x1200.jpg)

## Summary

Expanding Navigation Component

## Description

A terminal-inspired navigation component with corner-bracket styling and a smooth two-stage expand.

The component starts as a compact icon button and expands in two precise stages into a full navigation panel. First horizontally, then vertically, revealing all links at once. The animation is clean and modern, perfect to match the style of modern AI and data products.

The expanded panel uses a grid layout with Phosphor icons, titles, and short descriptions per link, plus a secondary row for less prominent links and a CTA button.

### What's included

-   Two-stage expand/collapse animation (Smart Animate)
    
-   Main links with icon, title, and description
    
-   Secondary link row for additional pages
    
-   Dedicated CTA button
    
-   Corner-bracket frame styling
    

### Customization

The component is fully adjustable. All labels, descriptions, icons, and the CTA are completely editable. Use as is or as a starting point for more complex navigation systems.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2650

## Details

- **Author**: Val Casanova
- **Published**: 2026-06-22
- **Updated**: 2026-06-29
- **Added**: 2026-06-22
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation