<vellum-sidebar>

Floating sidebar custom element.

Demo | Developer Guide

Features include:

• Toggleable side panel
• Stow side panel on mobile devices

Usage

Include the <script> in your markup:

<script
  type="module"
  src="https://www.unpkg.com/[email protected]/vellum-sidebar.js"></script>

Or, if you host the script as part of your project (recommended):

<script type="module">
  import 'vellum-sidebar/vellum-sidebar.js'
</script>

Example:

<vellum-sidebar>
  <nav slot="sidebar"></nav>
</vellum-sidebar>

Works best with smooth scrolling enabled:

html {
  scroll-behavior: smooth;
}

Styling

<vellum-sidebar> exposes CSS custom properties and shadow parts that can be used to style the side bar.

Supports the following CSS variables:

Variable	Description	Default
--sidebar-width	Width of the sidebar.	300px

Supports the following shadow parts:

Part	Description
sidebar	The sidebar pane container. Can be used to set padding, style the sidebar divider (border-right), etc.

For example:

vellum-sidebar {
  --sidebar-width: 250px;
}

vellum-sidebar::part(sidebar) {
  border-right: dashed red;
  padding-left: 10px;
  padding-right: 10px;
}