Responsive Navigation

SALES & SERVICING COMPONENTS

Responsive Web Navigation

Responsive Web Navigation

Overview

The responsive Web navigation component offers maximum flexibility to nest multiple subsections or feature a promotional message with photo (promos show in Desktop viewport only – they are suppressed for tablet/mobile views). 


Note: Nested button stack should never be combined with a promo – they are mutually exclusive.

Specifications

Specifications

Persistent Nav Bar

The persistent navigation bar is pinned to the top of the viewport on all devices. Content scrolls underneath it. Selecting a category in the desktop view invokes the expanded mega-menu (desktop only).

sales-servicing-responsive-web-navigation-asset-01

Table

sales-servicing-responsive-web-navigation-asset-02

Mobile

sales-servicing-responsive-web-navigation-asset-03

Promo with 1 Column

sales-servicing-responsive-web-navigation-asset-04

Promo with 2 Column

sales-servicing-responsive-web-navigation-asset-05

Nested Options

This nested option is indicated when three levels of navigation exist.

Nested | 1 Row | No Section Title

sales-servicing-responsive-web-navigation-asset-08

Nested | 2 Rows | With Section Title

sales-servicing-responsive-web-navigation-asset-09

Nested | Collapsed | Tablet

sales-servicing-responsive-web-navigation-asset-10

Nested | Expanded | Tablet

sales-servicing-responsive-web-navigation-asset-11

Nested | Collapsed | Mobile

sales-servicing-responsive-web-navigation-asset-12

Nested | Expanded | Mobile

sales-servicing-responsive-web-navigation-asset-13