Mega Tabs
This reference is for Divi 5. For Divi 4, see Mega Tabs Module under Modules → Divi 4.
Purpose and when to use
Mega Tabs (de-mega-menu/mega-tabs) shows a list of tabs beside or above tab bodies. Use it for category columns, featured collections, or any panel that should switch content on hover or click.
Each tab is a Tab child module. Add, remove, and reorder tabs from the parent.
Use this module on a mega menu assigned to a WordPress menu item. It is not supported on tooltip-only CSS class triggers.
Divi 4 layouts
Divi 4 Mega Tabs used Divi’s native Tab child. Divi 5 converts those children to Tab (de-mega-menu/mega-tab). On the front end, unconverted shortcodes still render; edit the mega menu in Divi 5 to convert and restyle.
Quick setup
- Add Mega Tabs.
- Add Tab children and set each title and body.
- Set Tab Layout (Vertical or Horizontal).
- Set Change Tabs On (Hover or Click).
- Optionally add Tab Links and Tab Images in the same order as the tabs.
- Style Tab and Body font groups.
Content tab
| Group | What it configures |
|---|---|
| Tabs | Draggable list of Tab children |
| Tab Extras | Layout, activate on hover or click, tab URLs, tab images |
| Background / Link / Admin Label | Standard Divi groups |
Core settings
| Setting | Type | Default | Notes |
|---|---|---|---|
| Tab Layout | select | Vertical | Vertical list beside content, or horizontal bar above |
| Change Tabs On | select | Hover | Hover or Click. Tab Links still open their URL on click |
| Tab Links | list | empty | URLs in the same order as the tabs |
| Tab Images | gallery | empty | Images in the same order as the tabs |
| Tab Images width | text | 36px | Image size in Design when images are used |
For a walkthrough of images on Divi 4, see How to add Images to Mega Tabs.
Design tab
| Group | What it configures |
|---|---|
| Tab | Tab label font, active/inactive background, active text color |
| Body | Font styles for tab content |
| Spacing, border, box shadow, background, animation | Module chrome |