Sidebar

v1.0.0

Meteorack admin sidebar with sections and nested navigation items.

Import

import { Sidebar } from '@meteorack/sdk-react';

How To Use It

Use it inside AdminShell to provide primary navigation for takeover-style admin experiences.
Keep the section structure stable so users can build muscle memory across module areas.

Works Well With

AdminShell AdminBar Badge

Props

sections: SidebarSection[]

Sidebar groups; each section has a label and items, and each item has a slug, label, and optional icon or badge.

collapsed?: boolean

Shrinks the sidebar to icon-only mode when true.

onToggleCollapse?: () => void

Enables and handles the built-in collapse toggle button.

activeSlug?: string

Marks the matching item as the active page.

onNavigate?: (slug: string) => void

Called when a nav item is clicked.

badges?: Record<string, number>

Overrides or injects badge counts per item slug.

footer?: ReactNode

Optional footer region for actions such as help, account, or environment status.

Example

Sidebar.tsx

import { useState } from 'react';
import { Sidebar, Button } from '@meteorack/sdk-react';

const sections = [
  {
    label: 'General',
    items: [
      { slug: 'overview', label: 'Overview' },
      { slug: 'updates', label: 'Updates' },
    ],
  },
  {
    label: 'Settings',
    items: [{ slug: 'appearance', label: 'Appearance' }],
  },
];

export function ModuleSidebar() {
  const [collapsed, setCollapsed] = useState(false);
  const [activeSlug, setActiveSlug] = useState('overview');

  return (
    <Sidebar
      sections={sections}
      collapsed={collapsed}
      activeSlug={activeSlug}
      onNavigate={setActiveSlug}
      onToggleCollapse={() => setCollapsed((value) => !value)}
      badges={{ updates: 3 }}
      footer={
        <Button variant="ghost" size="sm">
          Help
        </Button>
      }
    />
  );
}

PreviousAdminShell NextAdminBar