Skip to main content

Navigation List

Open this example in a new tab

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-svg-icon--burger--active next to the govgr-svg-icon--burger class to change the burger icon. Also, use the class govgr-nav__list--active next to the govgr-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.

Open this example in a new tab

Vertical navigation​

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

Open this example in a new tab
Open this example in a new tab