Jumbo Top Navigation

This setting enables more content to be displayed about your secondary pages, including an optional module.

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's Page 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.  

Setting It Up

Turn on Jumbo Top Navigation

Jumbo Top Navigation requires a Top Navigation Component be present in your site's Header file.

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.

Jumbo Top Nav setting in the Top Navigation component.

Jumbo Top Nav setting in the Top Navigation component.

Customization

You can 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.

Jumbo Top Navigation settings in Page Properties.

Jumbo Top Navigation settings in Page Properties.

Examples

An example of regular Top Navigation dropdowns.

An example of regular Top Navigation dropdowns.

An example of Jumbo Top Navigation default four column appearance.

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 three column with module appearance.

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.)

Restrictions

  1. The Top Navigation component in your site's header file must be adjusted to turn on Jumbo Top Navigation.
  2. Using the fourth-column module option is only intended to display a shared content Flex Module or Highlight Template page.

Was This Page Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)