Configure Mega Menu Widget in Destination

This article helps community managers and administrators set up the Mega Menu widget in customization mode in Destination.

Overview

The mega menu bar in the community serves as the main navigation for your community users. This menu bar helps users to access primary sections of your community effortlessly. You can configure the mega menu bar through its widget in customization mode in Destination.

Configure Mega Menu Widget

The MEGA MENU widget contains four sections: CONTENT, IMAGE, LAYOUT, and STYLE. Each section allows you to configure the navigation elements and set your preferred style of the mega menu bar.

Configure Content

The CONTENT section displays a list of out-of-the-box and customized pages created in Control. This section helps your community users easily access main pages of the community.

To configure the CONTENT section:

1. Log in to Destination.
2. Click Edit Layout. The customization mode is activated.

   

    

3. Hover on the Mega Menu widget.
4. Click the pencil icon. The Mega Menu slide-out panel appears.

   

    

5. Expand the CONTENT section. The list of community modules appears.
6. In the CONTENT section, you can perform the following actions:
   • Edit the display names of the existing modules.
   • Manage the visibility of each item using the eye icon.
   • Reorder the page display sequence using the drag-and-drop operation.
   • Add custom links. To add:
     1. Click Add custom link. A custom link panel is added.
     2. In the custom link panel, provide the Name and URL of the custom link.
     3. (Optional) Select the Open in new tab checkbox.

        

         

7. Click DONE.
8. Click Publish. The changes are published and visible to community users.

   

    

Configure Segment Visibility

Each item in the Mega Menu can be configured to be visible to specific community users. This empowers you to create a personalized experience on your site by displaying specific pages only to targeted user segments. With this feature, you can curate your page layouts based on roles, behaviors, or even anonymous (guest) access, leading to improved content relevancy, engagement, and user satisfaction.

Prerequisites

To control the user view, the admin must first create segments to assign the pages. For more information on how to create segments, refer to the Segments article.

To assign pages from the Mega Menu to segments:

1. Log in to Destination.
2. Click Edit Layout.
3. Hover on the Mega menu widget.
4. Click the pencil icon. The MEGA MENU slide-out panel appears.
    

   

5. Expand the page you want to add to the segments.
6. Turn on the User Segment Visibility toggle.
7. Click +Add User Segment.
    

   

8. From the downtown list, select the user segments to be associated with the navigation item.
9. Click Apply.
    

   

   
    
10. Click Done.
11. Click Publish to accept the new changes.

Configure Dropdown Menu for Custom Pages

Community managers and admins can add a dropdown list for custom pages in Destination. This empowers you to curate your page layouts depending on requirements.

For example, a main page called Products can contain a list of all the sub-products along with their URLs to redirect users to the product specific pages.

To configure dropdown list for custom pages:

1. Log in to Destination.
2. Click Edit Layout.
3. Hover on the Mega menu widget.
4. Click the pencil icon. The MEGA MENU slide-out panel appears.
    

   

5. Expand the custom page where the dropdown list is to be added.
6. Turn on the Dropdown toggle.
    

   

    

7. Click the Settings icon. The DROPDOWN SETTINGS slide-out panel appears.

8. Click +Add Item.

9. Enter the dropdown item as required.

10. (Optional) Click the Plus icon to add child items to the dropdown list.

11. Click Done.

12. Click Publish to save the changes.

Configure Image

The IMAGE section allows you to display a desired visual next to the navigation elements. It can be your company or community logo or any image you would like to upload.

To configure the IMAGE section:

1. In the Mega Menu widget, expand the IMAGE section.
2. Select one of the following options:
   • Display logo inherited from Branding: This option populates the logo assigned in the Branding configuration options.

     

      

   • Display a different image: This option allows uploading an image from a local drive. To upload the logo image.
     1. Click Upload Image.
     2. Select and upload the image from your local drive.
     3. (Optional) Crop the image as required.
     4. Click Save.

        

         

   •  No image: This option does not display any image in the navigation bar.

     

      

3. Click DONE.
4. Click Publish.

Configure Layout

The LAYOUT section allows you to choose how the navigation pages appear in the Mega Menu widget.

To configure the LAYOUT section:

1. In the Mega Menu widget, expand the LAYOUT section.
2. Select one of the following options:
   • Default width: This option lists navigation pages across the content width on the community page.
   • 100% width: This option lists navigation pages across the entire width of the community page.

     

      

3. Click DONE.
4. Click Publish.

Configure Style

The STYLE section allows you to change the color styling of texts, icons, border, and other elements in the Mega Menu widget.

To configure the STYLE section:

1. In the Mega Menu widget, expand the STYLE section.
2. In the STYLE section, the following options are available:
   • Background color: Sets the background color of the Mega Menu widget.
   • Menu text and icon color: Sets the color of the text and icons appearing in the widget. Select the Use text color checkbox to revert to the default Text color set in the Theme > Colors configuration.
   • Top Divider: Sets the top border color of the widget. Select the Use border color checkbox to revert to the default border color.
   • Bottom Divider: Sets the bottom border color of the widget. Select the Use border color checkbox to revert to the default border color.
   • Misc. Elements: Sets the text color for login and registration text (when logged out), and text for create and icon (when logged out). Select the Use brand color checkbox to populate color from the Branding configurations.

     

      

3. Click DONE.
4. Click Publish.