Mega Menus
Mega menus that feel smooth
Build any layout in Etch and show it in a dropdown that opens on hover, click or both.
- Stripe StyleThe panel glides and resizes between items.
- Adaptive HeightThe panel fits its content as it changes.
- Starter templatesReady-made mega menu layouts to start from.
- Link Parent ItemThe item links to a page, the arrow opens it.
Explore mega menusSmart buffer zones built inTabbed Navigation
Tabbed Navigation for your biggest menus
New in 1.3.0. Put tabs down the side of a mega menu, and each one shows its own content.
- In a mega menuTabs down the side, each with its own content.
- Tabbed HeroYour own hero next to the tabs, like this one.
- Compact Tabbed HeroOnly the tab list drops down until you hover.
- Built from your contentFill it from post types and categories.
Read the Tabbed Navigation guideThis hero is a Tabbed HeroMobile Menu
A mobile menu that's easy to use
Submenus slide in with a back button. Pick your breakpoint and your toggle style.
- Slide-in submenusEach level slides in with a back button.
- Offcanvas modeOpen the menu as a panel from the side.
- Toggle stylesHamburger icons with open and close labels.
- BreakoutMove items like an account button out of the menu.
Explore the mobile menuYour breakpoint, your choiceHeader Builder
Headers that stay in reach
Sticky and overlay headers, with their own styles once the page scrolls.
- Sticky headerKeeps your menu in reach as visitors scroll.
- Overlay headerSit your header on top of the hero.
- Liquid GlassA glass effect that bends what scrolls under it.
- Special stylesA new look for your header once the page scrolls.
Explore the headerSpecial styles for every scrollAccessibility
Menus everyone can use
Every menu, Tabbed Navigation and mobile menu works with a keyboard and with screen readers.
- Keyboard navigationArrow keys move through menus and tabs.
- Clear focus stylesVisible focus rings you can restyle.
- Skip linksLet keyboard users jump to the content.
- Mobile focus trapFocus stays inside the open mobile menu.
Read the docsRight-to-left ready tooAI Tools
Build your header by asking
Connect your AI agent to Etch and it builds mega menus with the Mega Menu Pro skills.
- AI ConnectorYour agent works right in your Etch builder.
- Mega Menu Pro skillsYour agent knows every prop and value.
- AI AssistantDocs and chat right inside the builder.
- Checks its own workIt tests the page in a browser before it's done.
See the AI ConnectorWorks with the Etch AI Connector
Mega Menu Pro for Etch
Mega menus and headers, built right in Etch.
Mega Menu Pro gives you mega menus, Tabbed Navigation, mobile menus and sticky headers as Etch components you set up with props.
Hover a feature on the left to explore itTap a feature below to explore it
Mega Menu Pro 1.3.0
Tabbed Navigation is here
Mega Menu Pro 1.3.0 adds Tabbed Navigation to your mega menus, plus Tabbed Hero for hero sections and compact dropdowns. Here's where to try each one on this page.
Tabbed Hero
Tabbed Navigation next to your own hero. Hover a tab and its content takes over. Move away and your hero comes back.
Try it aboveTabbed Navigation
A mega menu with tabs down the side, each with its own content. Great for products, services and anything a few levels deep.
Open FeaturesCompact Tabbed Hero
Only the tab list drops down. A tab's content opens when you hover it, so the menu stays small until it's needed.
Open DocsBuilt from your content
Tabbed Navigation that fills itself
This Tabbed Navigation is built from the blog's categories, and each list shows the latest posts. Add a category and it gets its own tab. No code, just Etch loops.
- Post types, like services or products
- Categories and other taxonomies
- A loop inside each tab for its content
100% responsive
One menu for every screen
Build your menu once and it works on desktop, tablet and phone. Mega Menu Pro turns the same menu into your mobile menu, so there's nothing to duplicate or keep in sync.
- No duplicate menus to build or hide
- Your own mobile breakpoint
- Dropdowns and Tabbed Navigation slide in on phones
- Screen readers and search engines see one menu
What you get
Made for real menus
Tabbed Navigation works like the rest of Mega Menu Pro, on every screen size.
Hover or click
Tabbed Navigation opens on hover or click. By default it follows your dropdown, so the whole menu feels the same.
Ready for mobile
On mobile, Tabbed Navigation slides in with a back button, or opens like an accordion. You choose.
Built from your content
Fill your Tabbed Navigation from post types like services or products, or from your categories, with Etch loops.
Tabbed Hero
Put your own hero next to the Tabbed Navigation, as a page section or as a compact dropdown in your header.
Keyboard friendly
Arrow keys move through Tabbed Navigation and into its content, and screen readers hear what's open.
Build it with AI
Ask your agent for a mega menu with Tabbed Navigation and it builds it for you. See the AI Connector
Mega Menu Pro 1.3.0
Build your next header with Mega Menu Pro
Already a customer? Run the Updater to get 1.3.0 with Tabbed Navigation. New here? Get Mega Menu Pro and start building.
New to Tabbed Navigation? Read the Tabbed Navigation guide.