Navigation system

The navigation system for apps.

#Side navigation

Group destinations under headings, and show counts where they help.

import { Badge, SideNavigation } from '@wolf-rayet/react';

<div style={{ border: '1px solid var(--wr-border-subtle)', borderRadius: 8, display: 'inline-block' }}>
  <SideNavigation
    label="Queues"
    sections={[
      {
        heading: 'Queues',
        selectedId: selected,
        onSelect: setSelected,
        items: [
          { id: 'billing', label: 'Billing', count: <Badge appearance="primary">18</Badge> },
          { id: 'tech', label: 'Technical support', count: <Badge>6</Badge> },
          { id: 'onboarding', label: 'Onboarding', count: <Badge>3</Badge> },
        ],
      },
      {
        heading: 'Team',
        selectedId: selected,
        onSelect: setSelected,
        items: [
          { id: 'reps', label: 'Reps' },
          { id: 'bots', label: 'Bots' },
          { id: 'settings', label: 'Settings' },
        ],
      },
    ]}
  />
</div>