Live demo — this example is server-driven; run the showcase locally for the interactive version.

Sidebar

A two-column layout — a fixed-width panel next to flowing content. Used for filter rails, secondary navigation, and contextual info. Different from Drawer (which slides in/out).

Examples

Basic

Panel beside content.

Stack

pf-m-stack — the panel sits above the content.

Panel right

pf-m-panel-right moves the panel to the end.

Panel right with gutter

pf-m-panel-right pf-m-gutter.

Sticky panel

pf-m-sticky pins the panel while the content scrolls.

Static panel

pf-m-static — the panel scrolls away with the content.

Responsive panel width

pf-m-width-25 / -33-on-lg / -50-on-xl.

Border

pf-m-split draws a divider between the regions.

Padding on panel

Only the panel carries pf-m-padding.

Padding on content

Only the content carries pf-m-padding.

Panel without padding.

Only the content opts into padding (pf-m-padding).

Documentation

Sidebar props

Parameters accepted by {#include components/data-display/sidebar ... /}. Model mode: pass sidebar=<Sidebar> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id.
`panelRight` / `gutter` / `stack`	boolean	Layout modifiers — emit matching `pf-m-*` on the wrapper.
slots `panel` / `content`	Qute block	The fixed-width panel and the flowing content.

Usage

Sidebar vs. Drawer. Sidebar is always visible. Drawer slides in/out — use when the panel is contextual or optional.

Edit sidebar.html on GitHub