Sidebar Layout

DuskMoon Elementsv1.10.2

Responsive persistent sidebar and content grid. The element wraps the public Core CSS contract in Shadow DOM without taking ownership of application state.

Installation

npm install @duskmoon-dev/el-sidebar-layout

Usage

import '@duskmoon-dev/el-sidebar-layout/register';

<el-dm-sidebar-layout position="start">
  <nav slot="sidebar" aria-label="Workspace">...</nav>
  <main>Workspace content</main>
</el-dm-sidebar-layout>

Live Demo

Workspace content

Properties

Property	Type	Default	Description
`position`	`'start' \| 'end'`	`'start'`	Logical sidebar placement
`compact`	`boolean`	`false`	Use compact sidebar width
`sidebar-hidden`	`boolean`	`false`	Hide the sidebar

Slots

Slot	Description
`sidebar`	Persistent sidebar content
Default	Main content

CSS Parts

Every structural wrapper is exposed with a matching CSS part name for targeted customization.