Sidebar
Sidebar
A side navigation panel that renders contextual navigation links based on the current page location. Supports collapsible sections, active state highlighting, and content-tree-driven link generation.
Examples
Examples
The Sidebar component is rendered live on this page in the left sidebar area. It automatically generates navigation links based on the current section of the content tree. The component highlights the active page and groups child pages under their parent's display name.
Key behaviors demonstrated:
- Active state highlighting — the current page link is rendered with
active fw-semiboldclasses - Content-tree navigation — links are auto-generated from sibling and child pages
- Grouped sections — pages with children become collapsible link groups with a title heading
- Leaf pages — pages without children render as standalone links
Control Properties
Control Properties
The Sidebar component is content-tree-driven and does not use traditional rendering parameters. Configuration is controlled at the page template level and via the rendering's datasource.
| Property | Type | Description |
|---|---|---|
| EnableSidebar | Checkbox | Page-level template field that controls whether the sidebar navigation renders on the page. When unchecked, the sidebar placeholder is hidden. |
| Datasource (Root Page) | Item Reference | Optional. When set to a content page item, the sidebar uses that page as the navigation root instead of deriving it from the context item's position in the content tree. |
Template Properties
Template Properties
The Sidebar automatically generates navigation from the content tree. The following child component templates define the rendered output structure:
| Template | Field | Type | Description |
|---|---|---|---|
| Sidebar Link Group | Title | Single-Line Text | The heading displayed above a group of navigation links. Derived from the page's DisplayName in the content tree. |
| Sidebar Link | Title | Single-Line Text | The visible text for the navigation link. Derived from the page's DisplayName. |
| Sidebar Link | Link | General Link | The URL target for the navigation item. Auto-generated from the page's item URL. |
Behavior: The SidebarBuilder traverses the content tree from the section root. Pages with children become link groups; leaf pages become individual links. Active state is determined by comparing the current request path to each link's URL.