Sidebar

Collapsible navigation sidebar with grouped sections, heading labels, and active link highlighting. Ideal for documentation sites, admin panels, and any layout that needs persistent vertical navigation.

Components

Sidebar

navigation

hybrid

<arc-sidebar>

Overview

Sidebar provides a structured vertical navigation panel that organizes links into collapsible, headed sections. It is the standard way to present multi-level navigation in documentation sites, admin dashboards, settings panels, and any application where the user needs to move between many related pages without losing context. Each SidebarSection groups links under an optional heading, creating a clear visual hierarchy that mirrors your information architecture. The active prop on SidebarLink highlights the current page, giving users an immediate sense of where they are within the navigation tree. Sections can be expanded or collapsed to keep long navigation lists manageable. Sidebar is designed to sit inside an AppShell or PageLayout, typically occupying the left rail. It reads the full viewport height by default and scrolls independently of the main content area, so deep navigation trees remain accessible even on long pages. Pair it with TopBar for a complete application chrome.

Guidelines

When to use

Group related links under a SidebarSection with a descriptive heading
Set the active prop on the link that matches the current route
Keep section headings short — one to three words that name the category
Place the Sidebar inside an AppShell or PageLayout for consistent layout
Use a Drawer to present the Sidebar on narrow viewports
Order sections by importance or frequency of use, most common first

When not to use

Do not nest Sidebars inside each other — use sections and indentation instead
Do not mark more than one link as active at the same time
Do not use Sidebar for top-level site-wide navigation — prefer TopBar for that role
Do not add more than eight to ten links per section; split large groups into sub-sections
Do not omit headings on sections — unlabeled groups make navigation harder to scan
Do not place actions (buttons, toggles) inside the Sidebar — it is for navigation links only

Features

Collapsible sections with heading labels for grouped navigation
Active link highlighting to indicate the current page
Independent scroll region for deep navigation trees
Composable with SidebarSection and SidebarLink sub-components
Keyboard navigable with focus-visible indicators on every link
Designed to integrate with AppShell and PageLayout for full-page chrome
Responsive-ready — pairs with Drawer for mobile breakpoints
Token-driven theming for background, border, and active-link colors

Preview

Getting Started

Design Tokens

Theming

Button

Card

Modal

Alert

Toast

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-sidebar>
  <arc-sidebar-section heading="Guide">
    <arc-sidebar-link href="/docs/getting-started">Getting Started</arc-sidebar-link>
    <arc-sidebar-link href="/docs/tokens">Design Tokens</arc-sidebar-link>
    <arc-sidebar-link href="/docs/theming" active>Theming</arc-sidebar-link>
  </arc-sidebar-section>
  <arc-sidebar-section heading="Components">
    <arc-sidebar-link href="/docs/components/button">Button</arc-sidebar-link>
    <arc-sidebar-link href="/docs/components/card">Card</arc-sidebar-link>
    <arc-sidebar-link href="/docs/components/modal">Modal</arc-sidebar-link>
  </arc-sidebar-section>
</arc-sidebar>

import { Sidebar, SidebarSection, SidebarLink } from '@arclux/arc-ui-react';

export function DocsSidebar() {
  return (
    <Sidebar>
      <SidebarSection heading="Guide">
        <SidebarLink href="/docs/getting-started">Getting Started</SidebarLink>
        <SidebarLink href="/docs/tokens">Design Tokens</SidebarLink>
        <SidebarLink href="/docs/theming" active>Theming</SidebarLink>
      </SidebarSection>
      <SidebarSection heading="Components">
        <SidebarLink href="/docs/components/button">Button</SidebarLink>
        <SidebarLink href="/docs/components/card">Card</SidebarLink>
        <SidebarLink href="/docs/components/modal">Modal</SidebarLink>
      </SidebarSection>
    </Sidebar>
  );
}

<script setup>
import { Sidebar, SidebarSection, SidebarLink } from '@arclux/arc-ui-vue';
</script>

<template>
  <Sidebar>
    <SidebarSection heading="Guide">
      <SidebarLink href="/docs/getting-started">Getting Started</SidebarLink>
      <SidebarLink href="/docs/tokens">Design Tokens</SidebarLink>
      <SidebarLink href="/docs/theming" active>Theming</SidebarLink>
    </SidebarSection>
    <SidebarSection heading="Components">
      <SidebarLink href="/docs/components/button">Button</SidebarLink>
      <SidebarLink href="/docs/components/card">Card</SidebarLink>
      <SidebarLink href="/docs/components/modal">Modal</SidebarLink>
    </SidebarSection>
  </Sidebar>
</template>

<script>
  import { Sidebar, SidebarSection, SidebarLink } from '@arclux/arc-ui-svelte';
</script>

<Sidebar>
  <SidebarSection heading="Guide">
    <SidebarLink href="/docs/getting-started">Getting Started</SidebarLink>
    <SidebarLink href="/docs/tokens">Design Tokens</SidebarLink>
    <SidebarLink href="/docs/theming" active>Theming</SidebarLink>
  </SidebarSection>
  <SidebarSection heading="Components">
    <SidebarLink href="/docs/components/button">Button</SidebarLink>
    <SidebarLink href="/docs/components/card">Card</SidebarLink>
    <SidebarLink href="/docs/components/modal">Modal</SidebarLink>
  </SidebarSection>
</Sidebar>

import { Component } from '@angular/core';
import { Sidebar, SidebarSection, SidebarLink } from '@arclux/arc-ui-angular';

@Component({
  imports: [Sidebar, SidebarSection, SidebarLink],
  template: `
    <arc-sidebar>
      <arc-sidebar-section heading="Guide">
        <arc-sidebar-link href="/docs/getting-started">Getting Started</arc-sidebar-link>
        <arc-sidebar-link href="/docs/tokens">Design Tokens</arc-sidebar-link>
        <arc-sidebar-link href="/docs/theming" active>Theming</arc-sidebar-link>
      </arc-sidebar-section>
      <arc-sidebar-section heading="Components">
        <arc-sidebar-link href="/docs/components/button">Button</arc-sidebar-link>
        <arc-sidebar-link href="/docs/components/card">Card</arc-sidebar-link>
        <arc-sidebar-link href="/docs/components/modal">Modal</arc-sidebar-link>
      </arc-sidebar-section>
    </arc-sidebar>
  `,
})
export class DocsSidebarComponent {}

import { Sidebar, SidebarSection, SidebarLink } from '@arclux/arc-ui-solid';

export function DocsSidebar() {
  return (
    <Sidebar>
      <SidebarSection heading="Guide">
        <SidebarLink href="/docs/getting-started">Getting Started</SidebarLink>
        <SidebarLink href="/docs/tokens">Design Tokens</SidebarLink>
        <SidebarLink href="/docs/theming" active>Theming</SidebarLink>
      </SidebarSection>
      <SidebarSection heading="Components">
        <SidebarLink href="/docs/components/button">Button</SidebarLink>
        <SidebarLink href="/docs/components/card">Card</SidebarLink>
        <SidebarLink href="/docs/components/modal">Modal</SidebarLink>
      </SidebarSection>
    </Sidebar>
  );
}

import { Sidebar, SidebarSection, SidebarLink } from '@arclux/arc-ui-preact';

export function DocsSidebar() {
  return (
    <Sidebar>
      <SidebarSection heading="Guide">
        <SidebarLink href="/docs/getting-started">Getting Started</SidebarLink>
        <SidebarLink href="/docs/tokens">Design Tokens</SidebarLink>
        <SidebarLink href="/docs/theming" active>Theming</SidebarLink>
      </SidebarSection>
      <SidebarSection heading="Components">
        <SidebarLink href="/docs/components/button">Button</SidebarLink>
        <SidebarLink href="/docs/components/card">Card</SidebarLink>
        <SidebarLink href="/docs/components/modal">Modal</SidebarLink>
      </SidebarSection>
    </Sidebar>
  );
}

<arc-sidebar>
  <arc-sidebar-section heading="Guide">
    <arc-sidebar-link href="/docs/getting-started">Getting Started</arc-sidebar-link>
    <arc-sidebar-link href="/docs/tokens">Design Tokens</arc-sidebar-link>
    <arc-sidebar-link href="/docs/theming" active>Theming</arc-sidebar-link>
  </arc-sidebar-section>
  <arc-sidebar-section heading="Components">
    <arc-sidebar-link href="/docs/components/button">Button</arc-sidebar-link>
    <arc-sidebar-link href="/docs/components/card">Card</arc-sidebar-link>
    <arc-sidebar-link href="/docs/components/modal">Modal</arc-sidebar-link>
  </arc-sidebar-section>
</arc-sidebar>

<!-- arc-sidebar is hybrid — CSS handles layout, JS enhances interactivity -->
<arc-sidebar></arc-sidebar>

API

active string ='': The href of the currently active sidebar link. Used to highlight the matching link with accent styling.
collapsed boolean =false: When true, collapses the sidebar to icon-only mode, hiding labels and reducing width.
position 'left' | 'right' ='left': Controls which side the sidebar appears on. Moves the border line to the opposite edge.
width string ='280px': Width of the sidebar. Accepts any CSS length value.
glow boolean =false: Enables an accent glow effect on the active sidebar link for enhanced visual emphasis.
label string ='Sidebar navigation'

Events

arc-navigate: Fired when a sidebar link is clicked

SidebarSection

<arc-sidebar-section>

A collapsible group within a Sidebar. Each section renders an optional heading label above its child links, creating a visual and semantic grouping that mirrors your information architecture. Fires an `arc-toggle` event with `{ open }` detail when the section is expanded or collapsed.

links: Get child arc-sidebar-link elements
heading string ='': Text label displayed above the group of links. Keep it short (one to three words) so the sidebar stays scannable. When omitted, links render without a heading divider.
collapsible boolean =false: When true, the section heading becomes a toggle button that expands/collapses the child links.
open boolean =true: Controls whether a collapsible section is expanded (true) or collapsed (false). Only relevant when collapsible is true.
icon string ='': Name of an icon to render before the heading. Ignored when the section has no heading.

SidebarLink

<arc-sidebar-link>

A navigation link rendered inside a SidebarSection. Supports an active state to indicate the current page and provides focus-visible styling for keyboard navigation.

resolvedHref: Destination, preferring the explicit attribute over an anchor child. Authoring `<arc-sidebar-link><a href="/docs">Docs</a></arc-sidebar-link>` leaves a working link in the pre-upgrade markup — arc-sidebar hides this light DOM only once it has re-rendered it into shadow DOM.
label: textContent already reaches through an anchor child, so this needs no special case.
href string ='': Destination URL for the link. Can be an absolute path, relative path, or hash anchor. The link renders as a standard anchor element for full accessibility and SEO.
active boolean =false: When true, applies a highlighted style (accent-colored text and a left-edge indicator) to signal that this link corresponds to the currently viewed page. Only one link should be active at a time.
level number =0: Nesting depth for visual indentation. Level 0 links render at default size; level 1+ links are indented and use a smaller font size.
icon string ='': Name of an icon to render before the label. Use icons consistently within a section — a sidebar where only some links carry one reads as an oversight rather than a hierarchy.
external boolean =false: Marks a destination that leaves the surrounding section — an app on its own route, another site, a repository. The link gains a persistent box-arrow glyph in place of the hover chevron, so the departure is legible before the click rather than after it.

Sidebar

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

SidebarSection

SidebarLink

See Also

Docs

Project

Arclight