Content Tabs - Horizontal
Ruby Mega Menu's signature feature — and one you won't find in any other mega menu plugin. Stack multiple full-width mega panels under a horizontal tab list. Each tab reveals its own panel with its own layout, its own height, its own content. Built for sites with distinct category trees: fashion, electronics, grocery, anything with "departments."
When to use Horizontal Tabs
- E-commerce sites with multiple distinct product departments
- Navigation where each "category" deserves its own mega layout
- Large catalogs where a single mega panel would be overwhelming
Creating a Shop Menu with Horizontal Tabs
-
Click Add Submenu in the builder for the item to which Horizontal Tabs Mega Menu will be appended.
Select Content Tabs (Horizontal) as the menu type.
Figure 1 Choose Shop Menu from the menu type selector. -
Click + Add a Tab (Category) to create a new tab.
Figure 2 The horizontal tab editor for Shop Menu. -
For each category, configure:
- Label — the horizontal tab text (e.g. "Men", "Women", "Kids")
- Link — where clicking the tab itself leads
- Layout — a 12-column grid layout, same presets as Classic Mega
- Columns — per-column configuration (list, image, etc.)
Figure 2 The horizontal tab editor for Shop Menu. -
Set Columns' Content as you like.
Figure 2 The horizontal tab editor for Shop Menu. -
Once you finished, Click Save.
How the panel height transitions
When a visitor hovers over different tabs, the mega panel's height smoothly transitions to fit the content of the hovered tab. This is measured automatically — you don't need to set heights manually.
The first tab in your list is the default — its panel is visible when the mega menu first opens.
Column types inside a Shop tab
Each tab's layout uses the same 12-column grid as Classic Mega Menu. Column types available:
- List of Links — a heading + linked list
- Image Link — a single clickable image
- Image + List — an image followed by a linked list beneath
See All Column Types for configuration details.