Skip to main content

Sidebar

Create a collapsible side container anchored to the left or right.

Example of the Sidebar widget in the Sybot Studio demo view

Recommended configuration

  1. Choose the anchor side and the width in cells.
  2. Drag widgets into the Sidebar's internal grid.
  3. Set the initial open or closed state and verify space recovery in the canvas.

Configuration options

AreaOptions
ContainerChild widgets, internal grid, and optional grid visibility in the published view.
SidebarLeft or right side, initial state, and optional persistence.
IdentityTitle, Subtitle, header visibility, icon type, and actions button.
PresentationStandard, Compact, or Dense variant and message to show when no data is available.
AppearanceBackground, background image, border, radius, padding, shadow, and typography for different areas.
PositionCoordinates and dimensions in cells within the page or container grid.

Best practices

  • Only one Sidebar is allowed per side of the page.
tip

Always verify the widget in Preview, in both light and dark themes, and with an empty data state before publishing the view.