Layered Mega Nav

Layered Mega Nav is a complete, dark-mode navigation system for Framer — a desktop navbar with nested dropdowns and a rich mega menu, plus a smooth drill-down mobile menu. It's built for SaaS, developer tools and tech products that have a lot of pages to organise but still want the header to feel calm and premium.

Desktop features:

- Multi-level dropdowns — up to three levels deep, with icons, descriptions and side flyouts

- Mega menu with grouped columns (By team, By industry, Resources) and a featured story card

- Announcement strip inside the mega menu for releases and updates

- Badges like New, Beta and Hiring on any item

- Hover spotlight, sliding marker, subtle sheen and text-roll link animations

- Glowing CTA button with glint effect and animated logo mark

- Header hides on scroll down, shows on scroll up, with blur and shadow once scrolled

Mobile features:

- Full-screen drawer that opens from the burger icon

- Drill-down screens for every sub-menu, with a clear back button and breadcrumb title

- Grouped sections, descriptions and badges carried over from desktop

- Smooth staggered animations that respect reduced-motion settings

Every colour, timing, easing, size and effect is editable from the property controls, so you can match any brand in minutes. A clean, lightweight code component — no extra setup.