Enriched Top Navigation

Stepping beyond the default links to your site's secondary pages, enriched headers support content-rich tabs with additional text, images, modules, news and event feeds, and multi-column link clusters. Each of these enriched tabs displays a dedicated mini-page built with one of the suite of Navigation Menu Templates.

Create these Navigation Menu pages directly beneath your header page so they are easier to steward and it is simple to reference them from the header's top navigation. In turn, as desired, you can then create additional elements (e.g. a Related Links page) as a child of any of the main Navigation Menu pages.

These special Templates load with an initial list component and one or more column controls but support many components, including Photo, Intro Text, Body Text, List Builder, and Event List.

Note: the Navigation Menu page title will show in the main site navigation unless overridden in the main Header page (where that Navigation Menu page is referenced).

Consult with your Unit Web Leader then review your existing site with fresh eyes. The Master Class resources below are invaluable for this process.

• Ensure your business strategy is up to date *, includes key messages, prioritizes target audiences, and defines key tasks for each audience.
  
• Review your business cases.
• Review your current IA.
• Review your site utilization (analytics).
• Be mindful of your resources (skills and available time) for buildout.
  
• Plan now for active stewardship.

* If you need a copy of your previous business strategy, contact the DCT Help Team.  

Identify the appropriate navigation menu for each section of your site.

Each template was crafted for specific use cases -- see the table below.

• Identify messages and key attributes you will showcase.
• Build for mobile first.
• Keep it simple.
• Keep in mind this is not a Web page or site index.
• Build, assess, refine.

The default navigation in the Enriched Header very effectively displays your site's internal architecture, based on the folder tree structure. This can be further customized by using 'build list using curated' instead of 'build list using child pages'.

For those few sites which need to enhance further, the Basic Menu pages produce a similar effect to the default navigation, but can be intermingled with the other menu types when those are necessary.

If you still wish to proceed with the rich templates, before you dive in, consider:

• This step requires IA expertise -- you need skilled resources to keep them focused and make your navigation effective and supportable. Work with your Unit Web Leader on this.
  
• Is your site more ”tell” or ”sell”..?
  
  • Some templates are more informational ("tell").
  • Some templates are geared towards marketing rich goals ("sell").
• Is your site a multi-function complex site like a school or does it have a more singular focus like an institute?
• And then for each section, match the templates to your specific needs.
• Also, what resources are available to create and steward your site? Don't bite off more than your team can chew -- keep it manageable.

You will be building a menu page for each section (tab) of your top navigation and each menu page should correspond to a section in your site's information architecture plan.

You have the option to just build these tabs using the Basic template, which mimics the default top navigation style, but appreciate that the more enriched templates (Marketing, Information, etc.) support many additional features.

Menu page templates are only available in your site-wide configuration folder (e.g. /content/www/abc/config or /content/abc/config), but we suggest you actually create the menu pages as children of your header page, so they are collected together in one spot, and are thus easier to reference from your header as you build out or steward your top navigation.  And if they are needed, create additional elements (e.g. a Related Links module) under the corresponding menu page.

When each menu page is created, the following settings are provided:

• Title - Enter a title that will make sense for this tab in your navigation. *
  
• Name - This becomes part of the URL path to your pages.
• Navigation Parent (Root) Page - The location of the corresponding section of your site; e.g. /content/www/abc/academics.
  
• Tags
  

* Note: Menu page titles will show in the main site navigation unless overridden in the main Header page (where each menu page is referenced).

Once the page is created, you will see one or more columns. Within each column is often a Navigation Section, which is a content container. Within each Section may be one or more Navigation Lists (essentially a List Builder component), and sometimes Intro, Body Text, or Photo components.

Some templates come with a section housing 'Related Links' or 'You may also be interested in' links. Work with the preloaded content, or thoughtfully add additional components as suggested below. The lists may be pre-populated with links based on the root path you chose, but you can then modify them to suit your needs.

• Each section describes elements specific to that menu template type.
• Then please see the Best Practices section below other considerations.

The following are generally available for use on navigation menu templates, but are not encouraged or permitted everywhere. Please be thoughtful.

• Body Text
• Button
• Callout
• Divider
• Event List
• Flex Module
• Image (similar to Photo)
• Intro Text
• Shared Content Reference (for a Highlight Template module)

Also, the link clusters are built using these two components:

• Navigation Section (container to hold a Navigation List)
• Navigation List (essentially a List Builder)

This advice applies broadly to all the templates unless otherwise noted.

• Only add images that bring strategic value and are stewarded.
  
• Build for mobile first. This will help greatly with breaks and scannability and prevent a bad experience for a large proportion of our visitors.
• If you display an Event List, make sure calendar headlines are concise so they do not wrap on your menu.
• Use 'You may also be interested in...' sections to cross-sell content from another section or point to relevant external resources but be highly selective to keep them relevant, and provide clear scent of the destination (e.g. 'Visit UB', 'Transfer to UB', 'Register for UBThisSummer').
• Use Resource List headers to identify the audience or focus your topic, then use your link text to provide scent of the associated content; (e.g. "Where We Are" for local and regional details).
  
• Reinforce Resource Lists with a highly selective Call to Action (e.g. 'Visit UB'). For inspiration, check out Adobe's menus.
• Build the sidebar highlight module in shared content so it can be repurposed in multiple places throughout your site and swapped out periodically to support conversions (e.g. 'first steps to admissions...' or 'apply now'), seasonal activities (e.g. Commencement, Open House, UBThisWinter), or opportunities (e.g. experiential learning). You could also use leverage content from other collections, such as university-wide or authoritative shared content. Using a carousel or list, the modules can even be cycled randomly.
  
• Integrate Buttons highlighting key tasks at the bottom of menus.
  • Be sure they are directly relevant to that menu (e.g. for Admissions use 'Apply'; for About Us, you might have 'Visit').
  • Do not overuse or you will reduce their overall effectiveness .
• Limit these to the footer: contact us, intranet, social media buttons, your address or contact details, and add a site map (which is strongly recommended for accessibility reasons)

More inspiration for what to choose can be found in the Toolkit from the April 21, 2023 DCT Solutions Group.

Every step of the way, as you build out your header, make sure it works in both desktop and mobile views using the UBCMS' built-in emulator tool. This will help greatly with breaks and scannability

You should already have a stewardship plan in place.

• Set up stewardship reminders to review each menu page at least yearly. Ideally assign a subject matter expert who can best manage each section.
  
• Block out time well in advance to carry out regular assessment of site usage (analytics) and then implement any refinements.