Layout / The visual dictionary

Sticky header.

A header that scrolls normally until it reaches an edge, then remains visible.

Also calledpinned headersticky section title

See it in context

UI illustration

What it is

A header that scrolls normally until it reaches an edge, then remains visible. Keep the header attached while its containing section is active, without covering focused content.

When to use it

Use it for long lists or sections where orientation should remain available.

Know the difference

Sticky positioning responds to scrolling within a container; fixed positioning stays attached immediately.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinux

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

CSS position sticky depends on the scrolling ancestor; native lists often provide pinned section headers.

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 sticky header. Keep the header attached while its containing section is active, without covering focused content. Use it for long lists or sections where orientation should remain available. 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…

Header

Fixed positioning

Scrollspy