Skip to main content

Navigation List

When to use this component

Use the navigation list component only when you need to show more options in one page.

You can use it:

  • use the horizontal navigation list right under the header
  • use the vertical navigation list in a sidebar

When not to use this component

Do not use this component if the service has only one goal.

How it works

Horizontal navigation

Horizontal navigation list is used at the top of the page below the header.

In order to use the mavigation list on mobile devices, use the govgr-burger-icon--active next to the govgr-burger-icon class to change the burger icon. Also, use the class govgr-horizontal-nav--active next to the govgr-horizontal-nav to highlight which navigation item is matching the current page.

If you need the icon to be white, use the class govgr-svg-icon--light. If you need the icon to be dark, use the class govgr-svg-icon--dark.

Vertical navigation

The vertical navigation list is used in a page that should link to other internal or external pages.