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
