The Secondary navigation component is used in addition to the Global navigation. The sole purpose is to provide a second (and third) level of navigation within a group pages.

Resources

Secondary navigation usage

The Secondary navigation component is used in addition to the Global navigation. The sole purpose is to provide a second (and third) level of navigation within a group pages.

 

When to use Secondary nav

The secondary nav can be used when a group of pages is needed

There is a minimum of 3 page links and a maximum of 6 page links

The secondary nav should link to landing pages. If you need an on-page link, please refer to On-Page Nav guide

Use secondary nav when content is closely related, but mutually exclusive

Site label is optional but recommended for SEO and IA (Information Architecture) customer benefit

If using (level 3) dropdown menu, there should be a minimum of 2 and a maximum of 6 links (unless using 2 column layout)

 

When not to use Secondary nav

Do not use secondary nav when there are less than 3 grouped pages

Do not use site search and persistent CTA together (site search currently unavailable)

Page link labels should not wrap to more than 2 lines

Appearance and behavior

Provide a navigation system for a site second and third level of navigation

Include an optional persistent call-to-action

Site label should be used to help orient customers to the product offering or purpose

Global and Secondary navigation headers include an optional “sticky” attribute; when scrolled the header(s) lock in place

Secondary Nav active state indicates the second-level page that is being visited

Optional third level dropdown menu is available – with up to two column support

Optional site search UI (coming soon – later this year)

 

 

Desktop Example (Default state – drop down visible)

 

Desktop Example (STICKY STATE WITH GLOBAL NAV)

Font specs

Active label
Font: AvenirNext forIntuit, 16px/24px Demi (600)
Color: #393A3D

Inactive label
Font: AvenirNext forIntuit, 16px/24px Reg (400)
Color: #6B6C72

Drop down label
Font: AvenirNext forIntuit, 16px/24px Reg (400)
Color: #6B6C72

Padding specs

Label
Top: 20px
Left: 40px
Bottom: 20px
Right: 40px

Elevation specs

Color: #000000
Opacity: 10%
X: 0
Y: 4
Blur: 8
Spread: 0

Stroke specs


Divider stroke: solid 1px #D4D7DC
Active stroke: solid 4px #2CA01C

Motion and animation

The secondary nav has slight micro animations: When the user scrolls down, the whole page moves up, then the secondary nav locks into place once it reaches the top. On tablet and mobile devices, the interaction happens when users use the drop-down menu.

motion sticky nav – Desktop prototype

motion Prototype – Tablet and mobile

Responsive behavior

  • Was this Helpful?
  •