Navigation on Tempest

We have a suite of navigation components to leverage on Tempest:

  • Primary Site Navigation

  • Off Canvas Navigation

  • Subnavigation

  • Sticky Navigation

  • Static Navigation Component

Primary Navigation

The primary site navigation bar available across all Tempest pages on desktop; this bar is not displayed on tablet and mobile due to limited real-estate.  The navigation bar is full width and sticky, allowing for constant navigation options throughout the reader experience and increases opportunity for recirculation.

Most publishers use the main navigation bar to highlight the most important content on the site, typically by section but this is not a requirement. This area is flexible and can be set-up to promote any content - section, rich term, basic page, or even an external page. The volume of links is not guaranteed as items will drop off depending on device and screen size.


Off-Canvas Navigation

The off-canvas navigation menu is universally available on the site; it is available on sizes A/B/C (devices) and is persistent across all pages of the site. It is entirely programmable. A publisher can choose to display their full site taxonomy in the off canvas navigation and/or just pieces. This is entirely flexible.


Subnavigation Component

The Subnavigation Component combines navigation with breadcrumbs. It displays the available subsections on a given section hub page based on the site's taxonomy.

When a section has additional children sections, this is indicated by an arrow for the user to engage with. If the section does not have additional children sections, the arrow will not be available.


On a detail page, the breadcrumbs are retained. The detail page is the lowest level item so the final item in the breadcrumbs is always one that cannot be engaged with. The user can leverage the breadcrumbs as a navigation method to return to a specific section hub page.


By default the subnavigation has a transparent background. This can be changed within the component styling to set any background color the you prefer. There are also options to set the colors to inverted to offer more control over the styling of this component.

By default this component will leverage the global nav fonts. The font size is slightly smaller. The font cannot be overridden.

The subnavigation content alignment will be left aligned by default with an option to override and set to center aligned.

Sticky Navigation

This is the navigation component that appears when a user scrolls up when part way through a content item on Tempest. The intention is to provide a menu easily accessible to the user as they are browsing through content. This prevents the user from having to scroll all the way to the top of the content item to re-access the original navigation menu. This appears on both hub and detail pages.

This component is not programmable. It pulls from the same list of links that are programmed in the Primary Navigation component.

Hub Page

Detail Page

Static Navigation

This component can be added to any hub page on Canvas. The goal of this component is to allow complete flexibility as to which links are programmed. The programming is done manually. The links can include sections, basic pages, offsite links etc. This is a great component to use on microsites that live as part of a Tempest site. This area may not be represented by a full taxonomy and/or could also include a series of basic pages strung together. This is a perfect use case for static navigation component. This is employed currently for the World Cup area of Dressage Today:



Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk