NAVIGATION / COMPONENTS

Header

Orient people at the top of an experience.

Live component8 documented props

About header

Header component should exist on most views. It gives logged in users access to their account, and gives access to global context.

Anatomy

Shared parts, named consistently.

1V1 · COMPACT

1
of Internal HeaderContainerRequired
The container of the header.
2
of Internal HeaderLogo
The company logo.
3
of Internal HeaderGlobal ContextRequired
Gives context to view.
4
of Internal HeaderPortal TitleRequired
Typically the portal name or division.
5
of Internal HeaderSubtitle
Typically the organization, partner, or department.
6
of Internal HeaderGlobal Search
Triggers global search flow on click.
7
of Internal HeaderNotifications
Triggers notification list on click.
8
of Internal HeaderUnread Notifications
Indicates unread notifications for logged in user when present.
9
of Internal HeaderUser Settings
Displays menu with user settings on click.
10
of Internal HeaderHelp
Displays help menu on click.
11
of Internal HeaderLogged in user
Avatar component of logged in user. Displays user menu on click.
12
of Internal HeaderLeft ContainerRequired
Contains content on left.
13
of Internal HeaderRight ContainerRequired
Contains content on right.
1
of Public HeaderContainerRequired
The container of the header.
2
of Public HeaderLogoRequired
The company logo.
3
of Public HeaderDrop ShadowRequired
Creates depth on page.
4
of Public HeaderGlobal Search
Triggers global search flow on click.
5
of Public HeaderNotifications
Triggers notification list on click.
6
of Public HeaderUnread Notifications
Indicates unread notifications for logged in user when present.
7
of Public HeaderUser Settings
Displays menu with user settings on click.
8
of Public HeaderHelp
Displays help menu on click.
9
of Public HeaderLogged in user
Avatar component of logged in user. Displays user menu on click.
10
of Public HeaderRight ContainerRequired
Contains content on the right.

Try the default

A working example with the shared V1 visual language.

When to use

Keep the brand, main destinations, and important actions consistent. Collapse or wrap navigation without changing reading order.

Links and buttons retain native keyboard behavior; the current destination uses aria-current.

About header

Anatomy

Try the default

When to use

Related components