Sticky List Section

Overview

The StickyListSection component provides sticky section headers that pin to the top of a scroll container while the section is visible, then push out as the next section scrolls in. Built with IntersectionObserver, it detects when a header becomes stuck and applies a subtle shadow.

Tip

Open the drawer and scroll to see the sticky headers in action. Each section header stays pinned until its content scrolls out, then the next header takes over.

Variations

Contained mode

Use contained when the StickyListSection is nested inside intermediate wrapper elements (form inputs, layout stacks, cards) but the drawer body is still the scroll container. This mode uses --cn-sticky-container-padding to bleed the header out to the drawer edges through the wrapper layers.

Tip

The sticky headers bleed edge-to-edge using --cn-sticky-container-padding to account for the horizontal inset of parent form wrappers. The drawer body remains the scroll container.

Installation

import { StickyListSection } from '@harnessio/ui/components'

// Direct usage inside a drawer body
<StickyListSection.Root>
  <StickyListSection.Header>
    <div>Section Title</div>
  </StickyListSection.Header>
  <StickyListSection.Content>
    {/* Scrollable list content */}
  </StickyListSection.Content>
</StickyListSection.Root>

// Contained mode — inside form wrappers
<div style={{ '--cn-sticky-container-padding': '...' }}>
  <StickyListSection.Root contained>
    <StickyListSection.Header>
      <div>Section Title</div>
    </StickyListSection.Header>
    <StickyListSection.Content>
      {/* List content */}
    </StickyListSection.Content>
  </StickyListSection.Root>
</div>

Note

DraggableCardList also exposes sticky, header, and contained convenience props that wrap StickyListSection internally. See the Draggable Card docs for that API.

Usage

Anatomy

<StickyListSection.Root>       {/* Container with sentinel for stuck detection */}
  <StickyListSection.Header>   {/* Sticky header — gains shadow when stuck */}
    {children}
  </StickyListSection.Header>
  <StickyListSection.Content>  {/* Section content */}
    {children}
  </StickyListSection.Content>
</StickyListSection.Root>

• StickyListSection.Root wraps the section and renders an invisible sentinel just above the header. An IntersectionObserver watches that sentinel; when it scrolls out of view the header is “stuck”, and Root exposes that state to the header (also reflected as data-stuck).
• StickyListSection.Header is the pinned header. It picks up a shadow while stuck. Put the section title and any actions here.
• StickyListSection.Content holds the scrollable body of the section.

All three parts forward their ref and accept standard <div> attributes.

Best practices

Do

• Keep the header content compact — a title and at most one or two actions — since it stays on screen while scrolling.
• Use it inside a scroll container (typically a Drawer.Body) where sticky positioning has something to pin against.
• Reach for contained only when wrapper elements sit between the section and the scroll container and you need the header to bleed to the edges.

Don’t

• Don’t nest a StickyListSection inside its own scrolling child — the header pins to the nearest scroll container, not the page.
• Don’t rely on the stuck shadow alone to separate sections; keep clear header text for each.

Accessibility

Labeling

• StickyListSection renders plain containers with no landmark or list roles, so each section’s meaning comes from the visible header content you provide. Give every section a clear text heading.

Focus & states

• The stuck state is a purely visual affordance (a shadow) and is not announced to assistive tech.
• The internal sentinel used for stuck detection is aria-hidden and never focusable.

Known limitations

• Sticky behavior depends on IntersectionObserver and on the header having a scroll container to pin against; without one (or in environments without the observer) the header simply scrolls normally.

Properties

Properties

Root

The container component that manages stuck detection via IntersectionObserver.

Prop	Required	Default	Type
children	true		ReactNode
contained	false		boolean
className	false		string

Root also accepts standard <div> attributes.

Header

The sticky header that pins to the top of the scroll container. Applies a shadow when stuck.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Header also accepts standard <div> attributes.

Content

Wrapper for the section’s scrollable content.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Content also accepts standard <div> attributes.