---
title: "Two-step Mega Menu — Free Framer component · Best of Framer"
description: "Free Framer component · by Till Janek · Navigation. Osmo Supply inspired navigation"
canonical: "https://framer.elliotli.dev/component/osmo-menu-navigation"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Two-step Mega Menu

# Two-step Mega Menu

Osmo Supply inspired navigation

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

![Two-step Mega Menu preview image 1](https://framer.elliotli.dev/og/component/osmo-menu-navigation/3e81a20e86d50978/1600x1200.jpg)

## Summary

Osmo Supply inspired navigation

## Description

## Details

Osmo Menu expands first, then drops into a mega menu. The grouped structure keeps navigation clear and scalable for SaaS products. Each group can carry its own context through a tagline, while badges and numbers add extra meaning where needed.

Everything is controlled through simple variables like colors, backgrounds, corner radius, logo, and link behavior. Leave fields empty to disable links and keep the menu minimal.

### How it works

Set the menu to fixed position and pin it top, left, and right on desktop with spacing like 16px.

On tablet and mobile, switch to the “Mobile” variant and adjust spacing if needed.

### Features

-   Two-step open animation
    
-   Up to 14 links
    
-   3 grouped sections with individual taglines
    
-   Optional third group can be disabled
    
-   Optional number value per link
    
-   Optional tag badge per link
    
-   Social links: Instagram, LinkedIn, YouTube, X, Framer
    
-   Smooth in and out animations
    
-   Dedicated mobile variant
    
-   Fully customizable via variables
    
-   Auto-hide unused links
    

### Credits

This component is highly inspired by [Osmo Supply](https://www.osmo.supply/). Go show them some love [(X)](https://x.com/osmosupply).

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

-   All · #2077

## Details

- **Author**: Till Janek
- **Published**: 2026-05-18
- **Updated**: 2026-05-19
- **Added**: 2026-05-04
- **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