Sidebar Layout¶
The Sidebar Layout widget is a page shell with three areas: a header across the top, a sidebar down one side, and a content area for everything else. It is the usual frame for a whole portal: the sidebar holds the navigation, the header holds the logo and the user's name, and the pages fill the content area. You will mostly use it in a design's layout rather than on an individual page.
See also Nav List for the navigation that goes in the sidebar, Grid Layout for a grid of cells, and Container for a plain box.
Using it¶
In the design editor, drop a Sidebar Layout into a layout. Drag a Nav List into the sidebar and a logo or heading into the header. Put a Content Placeholder in the content area so each page can fill it. Set Sidebar width to taste, and turn off Show header if you do not need the top bar.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Sidebar on | Left · Right | Left | Which side the sidebar is on |
| Sidebar width | Any CSS width, for example 240px or 20% |
Theme default | How wide the sidebar is |
| Show sidebar | On · Off | On | Whether there is a sidebar at all. Sidebar on and Sidebar width are disabled while it is off |
| Show header | On · Off | On | Whether there is a full-width header across the top |
| Container Style | Background, Padding, Margin, plus CSS | — | The shell's own background and spacing |
| Variant | Theme variants | Default | Picks the widget's look from the theme. See Variants |
| Custom Style | CSS for Header, Sidebar, Content | The sidebar and the content stack their children vertically | Extra styling per area. Header and Sidebar appear only while that area is shown |
| Box Style | Sizing and spacing | — | The box around the layout |
Tips¶
A few things to keep in mind:
- The header, sidebar and content are slots that take any widgets. A Nav List in the sidebar is the usual portal shell.
- This is a page-level frame. For an even grid of cells, use Grid Layout.