Header with navigation

An application header with navigation links, grouped menu items, and a user account menu.

How it works

The header has two main slots for content:

• Navigation — links and app header menus appear in the navigation bar below the header. Use plain links for single items and app header menu for grouped items with a dropdown.
• Utilities — actions like user account menus appear on the right side of the header. Use menu button for dropdowns with actions.

Navigation items automatically collapse into a “More” menu when the screen gets narrow.

When to use

Use this pattern when your service needs persistent navigation across pages. See the basic page layout example for a simpler header without navigation.