Sidebar
Material Design 3-styled sidebar layout web component (lit-material-sidebar) — a two-pane layout that stacks responsively via a container query.
- 956 B gzipped
- @lit-material/sidebar 0.0.3
- Renders on the server
Example
Sidebar
A two-pane layout — a fixed-width side panel next to flexible main content — that stacks responsively.
<lit-material-sidebar position="start" panel-width="10rem"> <nav slot="panel">Filters</nav> <div>Results</div> </lit-material-sidebar>
Install
npm install @lit-material/sidebar @lit-material/tokensimport "@lit-material/sidebar";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-sidebar>
A two-pane layout — a fixed-width side panel next to flexible main
content — for things like a filter panel beside a list, distinct from
lit-material-navigation's drawer/rail (which are app-level navigation
chrome, not a general content layout). Stacks to a single column via a
@container query on its own size rather than a @media viewport query,
so it collapses correctly regardless of where it's nested — a sidebar
embedded in a narrow column of an otherwise-wide page still stacks.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
position | position | SidebarPosition | "start" | Which side the panel sits on (before stacking). |
panelWidth | panel-width | string | "20rem" | The panel's width above the stacking breakpoint. Any valid CSS length. |
Slots
| Slot | Description |
|---|---|
panel | The narrower side content. |
| default | The main content. |
CSS parts
| Part | Description |
|---|---|
panel | The side panel's container. |
content | The main content's container. |