Back to Dictionary
Scroll & Navigation
●○○Ready to Use

Sticky Heading

As the user scrolls down a list, the category header sticks to the top of the viewport until pushed out by the next category header.

Live Demo

A
A
Apple
A
Apricot
A
Avocado
B
B
Banana
B
Blackberry
B
Blueberry
C
C
Cherry
C
Coconut
C
Cranberry

What It Is

As the user scrolls down a list, the category header sticks to the top of the viewport until pushed out by the next category header.

✓When to Use

  • Alphabetical contact lists
  • Long settings menus with grouped sections
  • Documentation sidebars

✕When NOT to Use

  • Short lists where context is never lost

Configuration Tips

  • 01Use CSS position: sticky and top: 0
  • 02Add a solid background color or backdrop-blur to the header so list items don't bleed through

You've Seen It In

iOS SettingsInstagram FeedNotion

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Make these section headers stick to the top of the screen while scrolling through their respective lists.

Code Example (Tailwind CSS)

export function StickyHeadingDemo() {}