Osmo Menu Navigation
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.
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.
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
This component is highly inspired by Osmo Supply. Go show them some love (X).
Till Janek
