Main menu

The main menu sits at the top of every page on the site, allowing users easy access to navigation and search.

Anatomy

• The full WSDOT logo (which links back to the home page)

• Search bar

• Menu

  • Mobile – Shows Level 2 titles as accordion items and Level 3 pages as links

  • Desktop – Shows Level 2 pages as links, no dropdown of Level 3 pages

Main nav on desktop vs. mobile

You may notice that the navigation items are slightly different on the desktop and the mobile views. Desktop has shortcut links to News and Employment that are not available on the mobile menu.

The mobile menu has additional menu items of "About", "Contact", and "ADA Information". These are the top level "Utility Nav" items from the Information Architecture that show up in the footer. They have been added to the hamburger to allow users on a small screen the full range of top-level navigation in one easy location.

Responsive sizing

On mobile, the menu is collapsed and opens when the hamburger menu icon is selected. The search button, when pressed, brings the user to the search/search results page where the user will enter their query.

Hamburger list items

The list items are meant to act as accordion expanders - so when a user chooses "Travel" from the expanded hamburger menu, they do not get taken to the landing page for Travel as they would on the desktop experience, but instead must choose from the expanded list of Level 3 pages.

There are a few reasons for this. Allowing users to skip landing pages on mobile is a strategic decision to assist them getting directly to their desired content area as quickly as possible. It can also be very difficult to build a navigation item that both links and opens other items in an accessible way.

Inspect navigation components in public site components in Figma

Change log

04/03/23 - Updated nav image

01/05/21 - Added section "Main Nav on Desktop vs. Mobile"

01/05/21 - Added section "Hamburger list items"