Transforming UB’s digital communications.
Jumbo Top Navigation
Extension of Top Navigation, displays more info about secondary pages.
Some features are being phased out or absorbed into the new Enhanced Header.
On this page:
On mobile phones and other small screen devices, this enhanced navigation will shrink down to collapsible links in the burger.
Last reviewed: May 24, 2022
Overview
Top Navigation now supports an optional layout called Jumbo Navigation. When this is enabled, the dropdown in the navigation bar for each top-level page will show additional navigation for its child pages.
Jumbo Top Navigation will display information about the children of that top-level page. This will be shown in a four-column row. By default, each column will show navigational links to each child page's children. The display can be further adjusted in each child page's Properties to show descriptive text. An alternate layout can display just the first three columns plus a special shared content module in the fourth column.
Technical Restrictions
- The Top Navigation component in your site's header file must be adjusted to turn on Jumbo Top Navigation.
- Using the fourth-column module option is only intended to display a shared content Flex Module or Highlight Template page.
Setup
1. Turn on Jumbo Top Navigation
Jumbo Top Nav setting in the Top Navigation component.
Jumbo Top Navigation requires a Top Navigation Component be present in your site's Header file, which is located in your sites Site-Wide Configurantion folder (your_homepage/config).
In the header file, adjust the Top Navigation's Menu Setting. Change the dropdown to 'Jumbo Top Nav.'
By default, the Top Navigation dropdown for each top-level page will now display information about its first four child pages. This will be in a four column format, with navigational links to all of its children.
Remember to (re)activate this page to make this change live.
2. Customize Content
Jumbo Top Navigation settings in page Properties.
You then further change what is shown in these four columns by adjusting the page Properties for each top-level page's child. Depending on these settings, each column may show navigational links to all child pages (the default), or the page's title and a teaser description (plus any navigational links), or a special shared content module in the fourth column.
- If there are fewer than four child pages, some of the columns will be empty. If there are no children, no dropdown will display at all. If there are more than four children, information will only be provided for the first four.
- To display a description for a second-level child page, add text to the Column Teaser Text field in that page's Page Properties (in the Advanced Properties tab, under Jumbo Top Nav). Descriptions for third-level children are ignored.
- To display a special module as the fourth column, go to the page Properties of the top-level child page, and set a path to your module in the Fourth Column Module field (in the Advanced Properties tab, under Jumbo Top Nav).
- This is intended to be a shared content Flex Module or Highlight Template page that includes text and an image.
- With this adjustment, information will only display for the first three child pages.
Remember to (re)activate these pages to make these changes live.
Examples
An example of regular Top Navigation dropdowns.
An example of Jumbo Top Navigation default 4-column appearance. (In this example, each page has a teaser description and no additional children.)
An example of Jumbo Top Navigation 3-column with module appearance. (In this example, two columns have navigational links to additional children, the third has a teaser description and navigational links to children, and the fourth column has been replaced by the shared content module.)