Sticky List Section

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.

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.

Usage

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.

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>

API Reference

StickyListSection.Root

The container component that manages stuck detection via IntersectionObserver.

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

StickyListSection.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

StickyListSection.Content

Wrapper for the section’s scrollable content.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string