Sidebar
Fixed-position sidebar for app layouts with adjustable widths and positioning.
Basic
Base
| Class | Description |
|---|---|
.ui-sidebar | Base class |
Size
| Class | Value |
|---|---|
.ui-sidebar--sm | sm |
.ui-sidebar--md | md |
.ui-sidebar--lg | lg |
End
| Class | Description |
|---|---|
.ui-sidebar--end | end |
Widths
<aside class="ui-sidebar ui-sidebar--sm ui-relative">
<p>Small (192px)</p>
</aside>
<aside class="ui-sidebar ui-sidebar--md ui-relative">
<p>Medium (240px, default)</p>
</aside>
<aside class="ui-sidebar ui-sidebar--lg ui-relative">
<p>Large (320px)</p>
</aside>End Position
<!-- Position sidebar on the end side with --end modifier. -->
<aside class="ui-sidebar ui-sidebar--end">
<p>End sidebar</p>
</aside>