Composer 2: Mega Menu User Guide

Overview

The Composer 2 Mega Menu feature introduces a four-level navigation structure via the new Header Style 8. This allows for deeper content organization, clearer grouping, and full styling control across all menu levels.

See it in action on our showcase website here

This feature is ideal for large-scale events with complex navigation needs, such as exhibitions, multi-track conferences, or content-rich award shows.

Setting Up the Mega Menu

Step 1: Structure Your Menu Items

1. Navigate to Menus → Main Menu in the CMS.

2. This is where you manage which items appear in your site’s navigation and how they are structured.

3. Use drag and drop to reorder items.

4. Use indentation to define menu levels:

   • Top-level items = Level 1

   • Indented under Level 1 = Level 2

   • Further indented = Levels 3 and 4

This defines the structure that will appear in the Mega Menu.

Step 2: Add a Header Panel

1. Go to Panels and click Add new panel.

2. Set the Location to Header.

3. Enter a panel name (e.g. “Main Navigation”) and save.

Step 3: Select Header Style 8

1. Open your new header panel.

2. Under the Default tab, find the Style dropdown.

3. Choose Style 8.

This enables the Mega Menu layout.

Step 4: Configure Menu Levels

1. Go to Settings → Content → Mega Menu.

2. You'll see sections for each menu level:

   • Level 1

   • Level 2

   • Levels 3 and 4

3. Expand each section and apply your desired styling.

Menu Level Breakdown

Level 1 – Top Navigation

• Menu alignment: Left, Center, Right, or Justified

• Home Icon: Toggle on/off and choose color

• Borders and Background:

  • Show or hide top and bottom borders

  • Option for blurred background

  • Choose colour from theme or use custom

• Text styling:

  • Font family, size, bold, uppercase

  • Hover and active text colour

Level 2 – Section Headers

• Typically used as subheadings under Level 1

• Option to set underline border colour

• Same text styling options as Level 1

Levels 3 and 4 – Nested Links

• Used for deep navigation, such as pages, filters, or subcategories

• Full control over font and text styling

• Hover and active state options included

Styling Tips

• Color options pull from your Design & Appearance theme settings.

• You can also define custom colours using the picker.

• If no colour is selected, black will be used as the default.

Where It Appears

• Level 1 appears as your main navigation bar.

• Level 2 appears beneath Level 1 as section headers.

• Levels 3 and 4 appear as nested dropdown items.

This feature affects only desktop navigation. Mobile and fixed menus remain unchanged.

Availability

• Available on all Composer 2 websites

• No special permissions or setup flags required

• Can be activated by any user with ShowOff access

Need Help?

If you have questions or feedback, please raise a ticket through the product feedback process or contact the support team.