Sticky allows an element to become fixed when it reaches a threshold (top, left, bottom, or right).

Figma:

Responsive:

Adaptive:

A11y:

Props

Component props
Name
Type
Default
children
Required
React.Node
-

The content to display.

bottom
number | string
-

Use numbers for pixels (bottom={100}) and strings for percentages (bottom="100%")

height
number
-

The height of the sticky container in pixels. This is useful when the sticky container and its content need to have different heights.

left
number | string
-

Use numbers for pixels (left={100}) and strings for percentages (left="100%")

right
number | string
-

Use numbers for pixels (right={100}) and strings for percentages (right="100%")

top
number | string
-

Use numbers for pixels (top={100}) and strings for percentages (top="100%")

zIndex
Indexable
-

An object representing the z-index of the sticky container. See the zIndex Classes page for more information.

Accessibility

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Ready
Component responds to changing viewport sizes in web and mobile web.