Layout / The visual dictionary

Header.

An introductory region at the top of a page or section.

Also calledpage headersite header

See it in context

UI illustration

ACMEWork · About · Contact

What it is

An introductory region at the top of a page or section. Place identity, a title, and essential context before the content it introduces.

When to use it

Use it to orient people and surface relevant top-level actions.

Know the difference

A header is a structural region; a navigation bar specifically provides navigation controls.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinux

Web · iOS · iPadOS · Android · macOS · Windows · Linux

Web headers may carry a banner landmark; native screen titles commonly live within a navigation bar.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a header. Place identity, a title, and essential context before the content it introduces. Use it to orient people and surface relevant top-level actions. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux

Go to the source

You might also mean…

Navigation bar

Hero section

Sticky header