Sticky
Keeps components at a given position on the screen during scrolling.
When to use
- To keep elements present on the screen at all times.
- For actions like navigation or jumping back to the top of the page after scrolling.
Component status
Figma | React | iOS | Android |
---|---|---|---|
N/A | Released | N/A | N/A |
Behavior
Use for essential actions
Sticky elements grab users’ attention. Just remember that if everything grabs for attention, then nothing stands out as important.
Limit sticky elements to places where they add value. This can be actions that apply to the entire page, navigation for the entire app, or context such as headers.
Look & feel
Keep it small
Sticky elements take up more of the user’s attention than ordinary elements. Don’t devote too much space to fixed elements. Leave room for the rest of your designs to breathe.