Navigation

Navigation is the system that a visitor can use to move around a website. Navigation tools can help orient the user and enable them to go elsewhere within the site.

Design System Guidelines

Masthead

If you're looking for the site-wide messaging that appears immediately beneath the masthead, then see Cards.

In your prototype, move the desired masthead to the very top of the page.

An authenticated variation of each masthead has been included. To show it, open the Sign In dropdown menu and then click the Sign In button. Webflow has no conditional state logic, so the user will be signed out when either the cart or country option is selected (you can modify this interaction if you wish).

Webflow has no conditional logic so you may see unexpected outcomes when switching between Search - Sign In - Cart - Menu at different breakpoints, or when resizing the browser window while one of these menus is open. To resolve such issues, simply refresh the page when you reach the desired window size.

There was no good way to reuse the taxonomy from the larger breakpoint menus in the smaller breakpoint off canvas menu, so if you change it in one then you will need to do so again in the other.

On smaller breakpoints, the browser scrollbar should scroll the masthead menu content while it's open and not the page behind. This isn't possible in Webflow, so if you're viewing a smaller breakpoint on a desktop then you may see redundant scrollbars side-by-side.

Masthead - For Work

The above masthead shows the For Work content as of 09-30-2019.

Skip Nav

Skip navigation is supposed to be shown when the first page interaction is keyboard Tab, however due to Webflow limitations any Tab press will show it.

The skip nav components appears at the top of a page (above the masthead) and enables keyboard navigation users to skip to a specific page section rather than cycling through every focusable page element.

Make sure to include the script from Page Settings > Before </body> tag on any pages where you use the skip nav component.

In production, the skip nav would close when keyboard tab causes the component to lose focus, in addition to selecting one of its options, however in Webflow it only closes when one of its options are selected.

Footer

Footer - For Work

If you're looking for the value propositions that appear immediately above the footer, then see Cards.

The below footer shows the For Work content as of 01-20-2020.