Skip to main content
Hennepin County Design System

Headers and navigation

Headers across every page let users identify Hennepin County websites and applications. They provide page structure for accessibility and context for what the site is and does. Headers also support navigation.

The header region contains consistent sitewide information. It should display at the top of every page. We use different header styles depending on the purpose of the site or application.

Illustration showing correct placement of headers at top of the screen for both desktop and mobile.

Open all

Assistive technology helps users with disabilities understand site structure and navigate pages. Users need to identify headers, main content areas, complimentary content areas, and footers. To do this, we use HTML5 and ARIA role landmarks on a page.

Use skip navigation links

A skip navigation link lets users with assistive devices "skip" to the main content. They can bypass the top of the page. A skip link is usually a hidden hyperlink until the user activates it by pressing the tab key. Users don't need to tab through the entire navigation menu each time they go to a new page. This saves them time and frustration.

Give each landmark a unique label

Some pages need more than one kind of the same landmark and they each need their own label. For example, a page may have more than one type of navigation. Give each navigation landmark its own label, like main navigation and breadcrumb navigation.

Example of a navigation label:

<nav aria-label="main menu"> vs. <nav aria-label="breadcrumbs">

Make headers visible, understandable, and usable

  • Use 18px - 20px font size for navigation labels.
  • Use proper color contrast for navigation labels in the header.
  • Use padding or white space between navigation labels.
  • Use concise and meaningful navigation labels.
  • Use only one level of navigation for dropdown menus.

Effective use of icons in the headers

Use icons for website header elements like the search bar or language switcher.

  • Always give icons a visible label.
  • Only use the hamburger with menu label icon for mobile. Never use it in desktop view. Users have a hard time finding small icons on desktop screens.
  • Use common icons users understand. Don’t use uncommon or ambiguous icons that can confuse users.
  • Use icons with care. Use them only to support a user task such as understanding information.
  • Don’t use icons to replace a key word in the navigation. Instead use common words for navigation, like Home.

Open all

Basic headers

Use a basic header for small sites and applications.

Two mockups of basic headers. Top header shows wordmark logo and search box. Bottom header shows wordmark, three page links, login link, and sign-out link.

Put the skip link before the header. Skip link should activate when tabbing or using screen readers.

When to use a basic header

  • For shallow site navigation of 5 or fewer items, with or without dropdown menus.
  • For either a search bar or call-to-action button, but not both.

When not to use a basic header

For deep navigation of more than 5 items.
For deep navigation, use a header appropriate to the size of your site.

Fixed header

We can use a slim fixed (sticky) header on websites with long scrolling.

Avoid displaying fixed headers on small windows or screens.

Program name header

A program name header contains the name of a specific county program. Program name headers work best for web forms or small applications. They keep the name of the program visible during the digital transaction. This lets users remember the name of the program.

Use this header if your service has fewer than 5 pages.

Mockup of service name header with drop-down navigation.

Program name with extended navigation

This option allows more page title links and a larger site structure.

Use this header if your program site has more than 5 pages.

Mockup of service name header with drop-down navigation.

Extended header with global navigation and mega menu

Only the county’s main website uses this structure. It’s designed for large, complex websites.

Mockup of an extended header with drop-down navigation.

Mobile menu

Consistent experiences with mobile menus help users learn our digital products.

Recommended best practices for mobile headers:

  • Use at least a 44-pixel space for all touch interactions (left-to-right and up-to-down).
  • Use the hamburger icon with the word “Menu.” Place the icon in the upper-right corner.
  • Expand the menu slide-out to cover 75% of the screen.Stack the main navigation at the top of the menu slide out. This applies when you have two navigation types.

Illustration of two mobile devices with a right-aligned hamburger menu.  First illustration shows menu closed and second illustration shows menu open.