Do you have a large number of key resources or links you want employees to be able to access at the click of the button? Then Mega Menu is for you!
With Mega Menu, you decide how to present content on your navigation bar. Making it easier for you and your colleagues to discover relevant content and ensure important links are always front and center.
- Consumer grade design means you can effortlessly build and manage your customized menu.
- Spend less time searching by sorting menu items into custom categories.
- Take control, link out to external sites, resources, or areas within Workvivo.
Please contact your Customer Experience Project Manager to get this switched on for your Workvivo instance, or submit a request via the Help Center.
Device(s): Desktop & Mobile
Roles / Permissions: Admins & Editors have automatically been granted the Manage Mega Menu permission.
Building your Mega Menu
Go to the ‘Mega Menu’ section of the Admin panel to begin building it out.
Here is an example of a pre-built menu manager populated with various headings and links. Headings are used to sort your menu links into categories of your choosing and will appear in your environment’s primary color.
Note: you can add up to a maximum of 14 items per column.
To begin building your menu, click ‘Add Item’ at the bottom of whichever column you would like to add an item to.
From here you can either add a heading or a link - both options are outlined below.
Adding Menu Headings
After clicking ‘Add Item’ you will be presented with the following modal. Make sure you have ‘Heading’ selected and fill in the following fields;
- Title: This is what users will see on the Mega Menu. It will appear in your environment’s primary color.
- Upload Image: This field is optional. The uploaded image will appear as an icon next to this group heading.
- Audience: Decide who should see this heading in the Mega Menu.
- Device type: Choose which device types this menu item should appear on - both Desktop and Mobile are selected by default. If you were to deselect ‘Display on Mobile’ here, this group heading would not be visible on mobile.
Adding Menu Links
Once again click ‘Add Item’, but now make sure you have ‘Link’ selected and fill in the following fields;
- Title: This is what users will see on the Mega Menu.
- URL: Fill in the URL associated with this menu link. Users will be brought to this URL when they click on this menu item.
- Audience: Decide who should see this item in the Mega Menu.
- Device type: Choose which device types this menu item should appear on - both Desktop and Mobile are selected by default.
Highlighting ‘New’ menu items
You can also highlight recently added menu items by displaying a ‘New’ badge next to them. Simply decide how long you would like to highlight an item for by using the date picker shown below.
We will show what this looks like for users, in the ‘Accessing Mega Menu as a User’ section of this article.
You can easily enable or disable the ‘Featured Column’ using the toggle situated at the top of the Mega Menu manager.
The featured column shows a user's starred menu items, featured apps and featured documents - we will look at this in more detail later.
Adding Menu Tabs
Menu tabs are optional and allow you to scale your Mega Menu beyond one page of items. This is particularly useful if you have a significant number of menu items, or if you would like to separate out tabs based on audience.
Click ‘Add Tab’ to begin building out new tabs. Fill out the following fields;
- Title: This is what users will see.
- Audience: Decide who should see each tab - users not in this audience will not see this tab and will therefore not be able to access items in it.
- Publish Date: The tab will be visible to users on whatever date/time you input here. Leave this field blank if you want to work on a tab in a ‘draft’ state.
You can easily edit existing tabs by clicking the ‘Edit’ icon next to each tab in the manager.
Accessing Mega Menu as a User
The Mega Menu lives in the top right corner of the top navigation bar, next to the notifications bell.
Click on the Mega Menu icon to expand your menu, as shown below.
Here you can see the tabs, headings and links that are set up in the Mega Menu manager. The ‘New’ badges can be seen in blue next to recently added items.
To the right hand side of the menu items you can see the ‘Featured Column’ - this contains the user's starred items, featured apps, and featured documents.
Starring items - Easily star items by hovering over them in the menu. You can un-do this from within the starred section, or directly from the item in the menu itself.
Featured Apps & Docs - The featured column displays the first five featured items. Users can click ‘View All’ to get an expanded view of any other featured items.
Contract/Expand Menu - Users can also contract/expand the Mega Menu (using the -/+ icon) if they would just like to see their Featured Column - this is very useful for users who regularly access their starred items only.
Mega Menu is also available on mobile and can be found at the bottom right of the side navigation section.
Clicking this icon will open your Mega Menu, as shown below. Tabs will appear on top in a scrollable carousel, starred items are automatically expanded to make access easier, and all headings are listed below.
Clicking a heading will expand out that section to show all associated links, as shown here for the ‘Our Tools’ group.
From here you can star items, and also see which items have recently been added with the ‘New’ badges. Items can also be un-starred from here.