A multi-column mega menu replaces the standard single-column dropdown with a wide panel that displays multiple columns of links side by side. It’s one of the most useful navigation improvements you can make to a content-rich WordPress site, and with the right plugin, it’s straightforward to configure.
This tutorial walks through the full setup using Ruby Mega Menu.
Step 1: Install Ruby Mega Menu
Download Ruby Mega Menu from WordPress.org (free version) or from Freemius (Pro). Install it via Plugins → Add New → Upload Plugin, or search for it directly in the plugin directory. Activate it.
Step 2: Create your menu
Go to Appearance → Menus. If you don’t have a menu created yet, create one and assign it to your primary navigation location. If you already have a menu, you can add mega menu capabilities to it without rebuilding.
Step 3: Open the Ruby Mega Menu settings
With the Ruby Mega Menu plugin active, you’ll see a Ruby Mega Menu admin panel in your WordPress sidebar. Open it. This is where you configure the global settings — menu width, height, color scheme, and typography. Set these to match your theme before configuring individual menu items.
Step 4: Configure a top-level item as a mega menu
In the menu builder, click on a top-level menu item to expand its settings. You’ll see a Ruby Mega Menu section with options for the submenu type. Select “Mega Menu” and choose your column layout — 2, 3, 4, or 6 columns.
Step 5: Add items to the mega menu columns
Add second-level menu items below the top-level item. These become the column headings or link groups in your mega menu panel. You can assign each one to a specific column using the column position settings.
Third-level items nest below the second-level items and appear as links within each column.
Step 6: Add optional headings and images
If you want column headings — styled labels at the top of each column — enable the heading option on your second-level items. For image columns, use the Image Link column type and select an image from your media library.
Step 7: Test the result
Visit your site and hover over the top-level menu item you configured. The mega menu panel should open, displaying your columns. Test on desktop and mobile to confirm the responsive behavior.
Common issues
If the panel appears but is clipped at the bottom of the header, your theme likely has overflow: hidden on the header element. Check your theme’s header settings or add a CSS override.
If the columns appear but don’t align correctly, check that you’ve assigned items to the correct column positions in the menu builder.
Multi-column mega menus typically take about fifteen minutes to configure once Ruby is installed. The result is a significant navigation upgrade — more useful, more visual, and much easier to scan than a standard dropdown.