Standard Left Sidebar
The rail is positioned first in the DOM, creating a standard dashboard entry point.
<div class="wf-sidebar wf-gap-6">
<aside class="...">...</aside>
<main class="...">...</main>
</div>
Layout
Sidebar
Sidebar
The Sidebar component is a structural pattern designed to manage secondary navigation or metadata rails alongside primary content. It uses flexible flexbox distributions that automatically collapse into stacked layouts on mobile devices.
Basic Implementation
Interactive Example
Responsive Dashboard Shell
Toggle the viewports to see the sidebar collapse above the main content on mobile screens.
<div class="wf-sidebar wf-gap-3">
<div class="..." style="min-width: 180px;">...</div>
<div class="...">...</div>
</div>Class Reference
All modifier classes available on .wf-sidebar
| Class Name | Type | Description |
|---|---|---|
| wf-sidebar | Base | Initializes the sidebar container with flex-based column distribution. |
| wf-sidebar-rail | Column | The sidebar column. Typically fixed width (e.g., 280px) on desktop. |
| wf-sidebar-main | Column | The primary content column. Automatically expands to fill the remaining space. |
| wf-sidebar-sticky | Utility | Applies sticky positioning to the sidebar rail during vertical scrolling. |
| wf-sidebar-swap | Modifier | Swaps the order so the sidebar appears on the right side of the main content. |