---
title: "BreakdownList"
description: "A part-to-whole breakdown as a list of meters: each row’s label, figure and share, with a bar against the largest. Rows lead to what they count, or narrow the page as toggles. It needs no chart library, reads well on a phone and says when there is nothing to show."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# BreakdownList

## Rows that lead to their list

The colored dot ties each row to the same color elsewhere on the page.

```tsx
import { BreakdownList } from '@arbol-ai/ui';
import { ChartPanel } from '@arbol-ai/ui/charts';

<ChartPanel className="max-w-md" eyebrow="Last 7 days" title="How conversations ended">
  <BreakdownList
    aria-label="Conversations by result"
    items={[
      { id: 'success', label: 'Resolved', value: 812, color: 'bg-chart-1', href: '#/breakdown-list' },
      {
        id: 'failure',
        label: 'Not resolved',
        value: 126,
        color: 'bg-red-9',
        href: '#/breakdown-list',
      },
      { id: 'unknown', label: 'Undecided', value: 64, color: 'bg-gray-6' },
    ]}
    showShare
  />
</ChartPanel>
```

## Rows that narrow the page

Pressing a row shows only its appointments below; pressing it again shows them all.

```tsx
import { useState } from 'react';
import { BreakdownList } from '@arbol-ai/ui';
import { ChartPanel } from '@arbol-ai/ui/charts';

const REASONS = [
  { id: 'forgot', label: 'Forgot', value: 18, caption: 'no-show' },
  { id: 'transport', label: 'No transport', value: 11, caption: 'no-show' },
  { id: 'rescheduled', label: 'Rescheduled elsewhere', value: 7, caption: 'cancelled' },
  { id: 'none', label: 'No reason given', value: 5, caption: 'cancelled', color: 'bg-gray-a6' },
];

const DrillDownExample = () => {
  const [reason, setReason] = useState<string | null>(null);
  return (
    <ChartPanel className="max-w-md" note="Press one to see its appointments." title="Reasons">
      <BreakdownList
        aria-label="Missed appointments by reason"
        items={REASONS}
        onSelectionChange={setReason}
        selectedId={reason}
      />
    </ChartPanel>
  );
};

<DrillDownExample />
```

## Rates and loading

Rates fill a whole bar at 100%; a row without a rate shows a dash.

```tsx
import { BreakdownList } from '@arbol-ai/ui';
import { ChartPanel } from '@arbol-ai/ui/charts';

<div className="grid gap-4 md:grid-cols-2">
  <ChartPanel title="Occupancy by agenda">
    <BreakdownList
      aria-label="Occupancy by agenda"
      formatOptions={{ style: 'percent' }}
      items={[
        { id: 'ruiz', label: 'Dr. Ruiz', value: 0.92, detail: '37 h of 40 h', color: 'bg-amber-9' },
        { id: 'gomez', label: 'Dr. Gómez', value: 0.64, detail: '26 h of 40 h' },
        { id: 'room', label: 'Procedure room', value: null, detail: 'no hours set' },
      ]}
      max={1}
    />
  </ChartPanel>
  <ChartPanel title="By service">
    <BreakdownList aria-label="Appointments by service" isLoading items={[]} />
  </ChartPanel>
</div>
```

## Source

The examples above are [`src/blocks/breakdown-list/breakdown-list.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/breakdown-list/breakdown-list.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/breakdown-list/index.mdx