Horizontal tab navigation is the menu pattern used by large e-commerce sites to handle deep product catalogs. Instead of a single mega menu panel, each top-level tab item opens a completely different panel — with its own columns, images, and links — that transitions on hover with a smooth height animation.
It’s the most complex menu type in Ruby Mega Menu Pro, and also the most distinctive. This tutorial walks through the setup.
How it works
In a standard mega menu, one top-level item opens one panel. In horizontal tab navigation, the top-level items are themselves tabs — clicking or hovering a tab item switches the mega menu panel below it.
Each tab item has its own full mega menu configuration. You set up columns, links, and images for each tab separately. When a visitor hovers over a tab, the panel updates to show that tab’s content.
Step 1: Set up the top-level structure
In the WordPress menu builder, create your top-level navigation item that will contain the horizontal tabs. This is typically a single item — “Shop” or “Products” — with multiple children.
Step 2: Select the Horizontal Tabs type
Open the Ruby Mega Menu settings for the top-level item and select “Horizontal Tabs” as the submenu type.
Step 3: Configure each tab item
Each second-level menu item becomes a tab. For each tab item, you’ll configure its own mega menu — column count, content type, links, images. This is the same configuration process as a standard mega menu, done once for each tab.
The panel that appears when a tab is active is fully independent. Tab A can show a four-column layout with category links; Tab B can show a two-column layout with image links and a content feed. There’s no requirement for consistency between tabs.
Step 4: Set the default active tab
Configure which tab is active by default — the one visitors see when they first hover over the parent item. Usually this is the first tab or the highest-traffic category.
Step 5: Test the transitions
Hover over the parent item and move between tabs. The panel should transition smoothly, animating to the new height as you switch. Test with the tabs that have the most different content amounts — the animation should handle large height differences gracefully.
Use cases beyond e-commerce
Horizontal tabs work anywhere you have grouped content that benefits from switching panels: a services menu with detailed descriptions per service, a portfolio navigation organized by project type, a resources library organized by content type.
The constraint is complexity — each tab needs enough content to justify the panel. If most of your tabs would show just a few links, a standard mega menu with column headings is probably simpler and equally effective.