Sidebar Layout
The Sidebar Layout element creates a two-column layout with a collapsible sidebar and a main content area. The sidebar references another page in your application, allowing you to build complex navigation structures.
Overview
Sidebar Layout splits the screen into two regions: a sidebar panel and a main content area. The sidebar can be collapsed or expanded by the user, and on smaller screens it can overlay the content instead of pushing it aside.
Common uses:
- Application navigation menus
- Filter panels alongside content
- Settings panels with a detail view
- Documentation-style layouts
Adding a Sidebar Layout
- Open the Website Builder
- Find Sidebar Layout in the Elements panel (under Layout)
- Drag it onto your page
- Configure sidebar properties in the General Tab
Note: This element is available for web applications only.
Properties
General Tab
Sidebar Content
| Property | Description |
|---|---|
| Source Page | The page whose content is rendered inside the sidebar |
Sidebar Configuration
| Property | Description | Default |
|---|---|---|
| Width | Sidebar width in pixels or percentage | 260px |
| Position | Which side the sidebar appears on (Left or Right) | Left |
| Default State | Whether the sidebar starts Expanded or Collapsed | Expanded |
| Collapse Behavior | How the sidebar collapses: Slide (slides out) or Push (pushes content) | Slide |
| Overlay Mode | When enabled, sidebar overlays content instead of resizing it | Off |
Color Tab
| Property | Description | Default |
|---|---|---|
| Sidebar Background | Background color of the sidebar panel | #f5f5f5 |
| Divider Color | Color of the border between sidebar and content | #e0e0e0 |
Dimensions Tab
| Property | Description |
|---|---|
| Width | Total element width |
| Height | Total element height |
| Padding | Inner spacing |
| Margin | Outer spacing |
Best Practices
Keep sidebar content focused - Use the sidebar for navigation or filters, not heavy content
Use Overlay Mode on narrow pages - Prevents the main content from becoming too cramped
Set a sensible default state - Collapse by default on content-heavy pages
Test at different widths - Ensure the layout works well at various browser sizes
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Web Elements - https://help.acenji.com/#/./create-web-application/elements/index