Skip to content

component

Two-step Mega Menu

By Till Janek

Details

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 . Go show them some love (X) .

Introduction

Osmo Supply inspired navigation

Rank history

Daily rank per list, from the first snapshot — lower is better.

15011001150118448/148/228/309/79/15
  • All · #1654