GlassSidebar

#Overview

#Install and Import

Install the package once, import the component from the public entry, and load styles a single time at the app root.

npm install aura-glass

import { GlassSidebar } from 'aura-glass'

import 'aura-glass/styles';

#Examples

Three baseline shapes flagship components use across docs and AI-agent guidance:

import { GlassSidebar } from 'aura-glass';
import 'aura-glass/styles';

const items = [
  { id: 'home', label: 'Home', href: '/' },
  { id: 'reports', label: 'Reports', href: '/reports' },
];

export function SidebarExample() {
  return <GlassSidebar items={items} activeId="home" />;
}

import { GlassSidebar, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function GlassSidebarSurface() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <GlassSidebar
        aria-label="Navigation production surface"
      />
    </GlassCard>
  );
}

#Accessibility

Keep navigation labels visible, mark the active item, and preserve tab order through links and actions.

#SSR and Performance

Import from the public package entrypoint, load `aura-glass/styles` once, and keep expensive data, media, or animation work outside the visual component unless the product needs it.

#Theming

Theme with public props, `className`, `style`, and AuraGlass CSS variables. Avoid private DOM selectors so the component can upgrade with the package.

#Related Components