Mega Nav

With the introduction of the new brand styles, the Digital Team has added the ability to create a mega navigation on all Cascade sites. This allows web admins more control over their navigation and gives administrators the ability to add content and links in up to four columns across the drop down plane. This change also improves user experience of using the navigation on mobile devices.

The most noticeable change from our previous navigation is that all hover-over states on the top navigation cause the entire mega nav plane to open on desktop. This means that if you’re using the Big Menu option, you no longer see a column to appear below the navigation item when hovered over. Instead the Big Menu links float left within the plane of the mega nav.

1. Finding the main-navigation configuration item

The main-navigation configuration item controls the top nav. You can find the item in the _configuration folder under the site root folder. Only Site Administrators have access to edit this item or add a main-navigation configuration if your site does not have one already.

To add the main-navigation item go to Add Content, the Configuration folder and select the Main Navigation option.

2. Adding and Deleting Nav Items

Adding or deleting navigation items works just as before. Click + to add a new item or X to delete an existing item. Use the arrows to move the order of navigation items. Each navigation item added appears in the top navigation bar and uses the Navigation Title specified in the selected page.

3. Nav Item Options

• Page: selects the page used to populate the Title and URL in the top navigation bar.
• Mega Navigation: Enables the Mega Navigation options. The Mega Navigation option overrides the Big Menus option if both are checked.
• Is Link: When enabled, the Title in the top navigation will be a clickable link. If disabled, the title of the Page will appear but will not be linked. This allows web admins control over how users navigate the mega navs.
• Big Menus: When enabled, this option automatically adds the children of the top page selected to appear in the drop down navigation. Any child page hidden from navigation will not appear. The Mega Navigation option overrides the Big Menus option if both are checked.

4. Mega Nav Options

Mega Nav Column Layout

The Mega Navigation Settings allow you to add up to 4 columns of content to the mega nav. The columns will be evenly spaced out depending on the number of columns added to the setting. Within each column, you can add as many components as you need. As you add components, the height of the mega nav drop down will expand to fit the content.

5. Mega Nav Component - Content

You have two options within the mega nav component: Content and Link List. Content opens up the regular rich text editor and allows you to create any type of content you normally can within a content block. For example, the search bar under the Service item on the ualberta.ca homepage was created within a content block.

Example of adding content in the mega nav

6. Mega Nav Component - Link List

Mega Nav with Headers and Links

The Link List option allows you to add a single header with any number of links below the header. If you leave this field blank, the header will not display.

• Header: The Header title text overrides the Navigation Title of the selected page. You can also choose whether to not to make the Header a clickable link by choosing to select a page or not. If no page is selected, the header will not be linked. 
• Link: You can add as many links as desired below the header. The Display text is required and will override the Navigation Title of the selected page of the link.

Example of Mega Nav using Headers and Links

Mega Nav with Headers Only

You can also create a mega nav using only headers if you don’t have enough links to make a list below the header. To do this, simply add components using Link Lists within the same column and only fill in the Header fields. Blank Link fields won’t display any content.

Example of Mega Nav using Headers Only

7. Publishing the Mega Nav

To publish changes to the mega nav, you need to republish the entire site as the top navigation appears on every page within the site.

Important

Because the mega navigation is manually created, changes to your site structure that impact the top navigation also require manually updating the main-navigation configuration, except where Big Menus are selected. In all cases, changes to the site structure that affect the top navigation require you to republish your site for those updates to appear on every page in the site.