SidePanel

Basic Usage

The Side Panel is a persistent navigation panel with sub-components for items, labels, menus, and spacing.

Use the <k-main> component alongside the side panel to automatically adjust content margins when the panel expands or collapses. The Main component wraps a standard <main> element with auto-centering and listens for panel state changes via window events.

<script type="module" src="../src/components/SidePanel.js"></script>
<script type="module" src="../src/components/Main.js"></script>

<k-side-panel>
  <h3 slot="logo">Kempo</h3>
  <k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
  <k-side-panel-item icon="check" href="#">Tasks</k-side-panel-item>
  <k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
  <k-side-panel-label>Projects</k-side-panel-label>
  <k-side-panel-item icon="folder" href="#">Figma Design</k-side-panel-item>
  <k-side-panel-item icon="folder" href="#">Static Mania</k-side-panel-item>
  <k-side-panel-spacer></k-side-panel-spacer>
  <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
  <k-side-panel-item icon="account-circle" href="#">Profile</k-side-panel-item>
</k-side-panel>
<k-main>
  <h2>Main Content</h2>
  <p>Content automatically adjusts when panel opens/closes.</p>
</k-main>

With Menu

Use k-side-panel-menu for expandable menu items.

<k-side-panel>
  <k-side-panel-item icon="cards" href="#">Dashboard</k-side-panel-item>
  <k-side-panel-menu icon="folder" label="Projects">
    <k-side-panel-item href="#">Website Redesign</k-side-panel-item>
    <k-side-panel-item href="#">Mobile App</k-side-panel-item>
  </k-side-panel-menu>
</k-side-panel>

Independent Scrolling

The SidePanel scrolls independently from the main content area, allowing users to navigate extensive menus without losing their place in the content.

Persistent State

Use the persistent-id attribute to save the panel's collapsed/expanded state to localStorage. When the page is refreshed, the panel will remember its previous state.

<k-side-panel persistent-id="main-nav">
  <h3 slot="logo" class="m0">My App</h3>
  <k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
  <k-side-panel-item icon="check" href="#">Tasks</k-side-panel-item>
  <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
</k-side-panel>

Right Side Panel

Set the side attribute to "right" to position the panel on the right side of the page.

<k-side-panel side="right">
  <h3 slot="logo">Tools</h3>
  <k-side-panel-item icon="notification" href="#">Notifications</k-side-panel-item>
  <k-side-panel-item icon="chat" href="#">Messages</k-side-panel-item>
</k-side-panel>
<k-main>
  <!-- Content -->
</k-main>

Dual Side Panels

You can have two side panels on a page simultaneously - one on the left and one on the right. The <k-main> component will automatically adjust margins for both panels.

<k-side-panel>
  <!-- Left panel content -->
</k-side-panel>

<k-side-panel side="right">
  <!-- Right panel content -->
</k-side-panel>

<k-main>
  <!-- Content centered between both panels -->
</k-main>

JavaScript Reference

Constructor

Extends ShadowComponent

new SidePanel()

Main Component

The <k-main> component is designed to work with <k-side-panel>. It automatically adjusts its left or right margin based on the panel's state (expanded/collapsed) and side (left/right).

How It Works

• Listens for side-panel-change events on window
• Automatically detects existing panels on mount
• Adjusts margin with smooth transitions
• Provides standard <main> centering and max-width behavior
• Works with both left and right side panels
• Supports dual panels (one on each side) simultaneously

Usage

<k-side-panel>...</k-side-panel>
<k-main>
  <!-- Your content here -->
</k-main>

No additional JavaScript or event listeners are required. The components communicate automatically via window events.

Requirements

• ShadowComponent
• Icon

Properties

collapsed: boolean

Whether the side panel is collapsed to icon-only view. Defaults to false. Syncs to collapsed attribute.

side: string

The side where the panel is positioned. Can be "left" or "right". Defaults to "left". Syncs to side attribute.

persistentId: string

A unique identifier for saving the panel's collapsed/expanded state to localStorage. When set, the panel will remember its state across page refreshes. Syncs to persistent-id attribute.

Events

expand

Dispatched when the side panel is expanded.

collapse

Dispatched when the side panel is collapsed.

change

Dispatched when the side panel state changes. Event detail contains "expand" or "collapse".

toggle

Dispatched when the toggle method is called.

Methods

expand(): void

Expands the side panel to show labels.

collapse(): void

Collapses the side panel to icon-only view.

toggle(): void

Toggles the side panel between expanded and collapsed states and dispatches a toggle event.

CSS Variables