component
Two-step Mega Menu
By Till Janek
Details
- Till JanekAuthor
- componentType
- 2026-05-18Published
- 2026-05-19Updated
- 2026-05-04Added
- NavigationCategories
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.
- All · #1654