<ui-shell>
Application shell with collapsible sidebar and top bar.
Shell · stable · since 2.0.0 · extends _UIElement
Examples
<ui-shell><ui-topbar>App</ui-topbar><ui-sidebar>Menu</ui-sidebar><main>Content</main></ui-shell><ui-shell collapsed><ui-sidebar>Menu</ui-sidebar><main>Content</main></ui-shell>Playground
Generated HTML
Event log
API
Attributes and properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | |
busy | data-ui-busy | boolean | false | |
collapsed | collapsed | boolean | false | Collapse the sidebar. |
sidebarOpen | sidebar-open | boolean | false | Mobile sidebar open state. |
persist | persist | boolean | false | Remember the collapsed state in localStorage. |
Methods
toggle— Toggle collapsed state.openSidebar— Open the mobile sidebar.closeSidebar— Close the mobile sidebar.
Events
ui-shell-change— Collapsed or sidebar state changed.
Slots
(default)— ui-topbar, ui-sidebar and page content.
CSS classes
- Base class:
ui-shell collapsed→ui-shell--collapsed