`sidebar` element

A side panel of supplementary content or navigation.

Renders

<aside>

Required

Nothing beyond type.

Native apps

Web, and server-driven native apps

Syntax

sidebar element

{ "type": "sidebar" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Description
`side`	`"left""right""top""bottom"`
`elements`	`array of element`
`layout`	`object`	`align`: `"start" \| "center" \| "end" \| "stretch" \| "baseline"` `direction`: `"row" \| "column" \| "row-reverse" \| "column-reverse"` `gap`: `string` `justify`: `"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"` `wrap`: `boolean`

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

sidebar example

{
  "type": "sidebar",
  "side": "left",
  "elements": [
    { "type": "text", "variant": "label", "content": "Filters" },
    { "type": "link", "label": "Under ₹2, 000", "target": "/products?max=2000" }
  ]
}

For a dashboard frame with a sidebar that hides on phones, put the sidebar in a layout slot with structure.sidebar.mobile: "hidden".

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <aside class="iwc-sidebar i23a1dcd3">
    <span class="iwc-text i97db51c1 iwc-text-label">Filters</span><a class="iwc-link ic513ef38" href="/products?max=2000">Under ₹2,000</a>
  </aside>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.