Skip to main content
Version: v11.12.1

Creating Sticky Header

A sticky header is a UI element that remains pinned at the top of the screen while the rest of the content scrolls beneath it. It allows widgets to stay visible and accessible as users scrolls, ensuring easy access to important sections and actions without the need to scroll back.

In below example, Profiles is configured to be sticky.

Configuring Sticky Header​

Sticky header can be created by enabling the Sticky property on a Container widget. When enabled, all supported widgets inside that container become sticky:

  • They stick below the top navigation bar (by default).
  • If the top navigation bar is set to hide on scroll, sticky widgets will pin to the very top of the screen.

Steps​

  1. Add a Container: Drag and drop a Container widget onto your page.
  2. Enable Sticky: In the Properties panel, go to the Behavior section and enable the sticky property for the container.
  3. Insert Widgets: Place the widgets you want to be sticky inside this container.
  • Sticky widgets are position calculated and move as you scroll, staying pinned at the top. For accurate positioning, avoid adding dynamic content (which takes time to load) above the sticky widget.
  • Use a non-transparent background color for the sticky container to improve visibility and prevent content overlap.

Limitations​

  • You can only create one sticky container per page.

Supported Widgets​

The following widgets are supported as sticky widgets:

Anchor, Button, Button Group, Icon, Lottie, Label, Picture, Progress Bar, Search, Spinner, Progress Circle, Video, Camera, Calendar, Checkbox, Chips, Menu, Checkboxset, Tile, Currency, Date, Datetime, Time, Number, Radioset, Rating, Select, Slider, Switch, Text, Textarea, Toggle, Audio, Partial