---
title: "Staggered Menu FX — Free Framer component · Best of Framer"
description: "Free Framer component · by Francisc Toth · Navigation. sliding menu staggered"
canonical: "https://framer.elliotli.dev/component/staggered-menu-fx"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Staggered Menu FX

# Staggered Menu FX

Full-screen staggered menu reveal

[View on Framer](https://framer.com/marketplace/components/staggered-menu-fx/?via=elliot-li)

![Staggered Menu FX preview image 1](https://framer.elliotli.dev/og/component/staggered-menu-fx/d64865dac9e8a0b1/1600x1200.jpg)

## Summary

sliding menu staggered

## Description

Animated full-screen navigation menu with cascading reveal effect. Coloured layers slide in first, followed by the main panel and staggered menu items.

### How it works:

-   Click the Menu button to trigger animation
    
-   Coloured pre-layers slide in sequentially
    
-   Main panel follows with smooth easing
    
-   Menu items animate with stagger (slide up + rotate)
    
-   Item numbers fade in with delay
    
-   Social links reveal at bottom
    
-   Plus icon rotates to X
    
-   Click outside or button to close
    

### Features:

-   Full-screen sliding panel
    
-   Multiple coloured pre-layers (up to 4)
    
-   Large menu items with staggered entrance
    
-   Optional item numbering (01, 02, etc.)
    
-   Social links section
    
-   Left or right position
    
-   GSAP-style cubic-bezier easing
    
-   Hover accent color on items
    
-   Click outside to close
    
-   4 native Framer font controls
    

### Typography Controls:

-   Menu Font — main navigation items
    
-   Button Font — toggle button text
    
-   Number Font — item numbering
    
-   Social Font — social links section
    

### Perfect for:

-   Agency websites
    
-   Portfolio sites
    
-   Creative studios
    
-   Landing pages
    
-   Full-screen navigation
    
-   Mobile-first menus
    
    Updates:
    
    19 Aug 2026
    
    Fixed the text cursor appearing over menu and social links, so they now behave like proper buttons on hover.
    

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

-   All · #4288

## Details

- **Author**: Francisc Toth
- **Published**: 2026-01-21
- **Updated**: 2026-09-14
- **Added**: 2025-11-27
- **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