# ListItemNavigation

> Slug: `list-item-navigation` · Category: Display

## When to use
- A list row whose entire surface should navigate to another page or section, with a trailing chevron.
- Account-style menus ("My profile", "Billing", "Notifications") and settings indexes.

## When NOT to use
- Rows with a checkbox/radio -> `ListItemFilter`.
- Rows that only need an info / action icon (no chevron, no navigation) -> `ListItemTrailingIcon`.
- HSI device rows -> `ListItemHsi`.
- A whole list of mixed nav/link/toggle rows from a single array -> `Lists`.

## Variants & decision tree
- Same-app navigation -> set `navigationUrl` to a relative path; the row renders an `<a>`.
- External link -> use `Lists` with `ListItemType.LINK` for a labelled external-link affordance.

## States
- `inverse` — dark-background styling.
- `focused` — force-focus visual for design review only.

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **`label`** | `string` | — | Primary row text. |
| **`navigationUrl`** | `string` | — | Required. URL the row navigates to. |
| `labelId` | `string` | auto | Unique ID for the label. |
| `body` | `OptionalCopy[]` | — | Up to two body lines. |
| `status` | `StatusLabelProps` | — | Inline status pill. |
| `leadingDecorationType` | `'device' \| 'app' \| 'avatar' \| 'icon'` | — | Leading visual type. |
| `leadingImage` / `leadingIcon` / `leadingDecorationA11yLabel` | — | — | Leading decoration data. |
| `dividerPosition` | `'top' \| 'bottom' \| 'none'` | `'bottom'` | Divider placement. |
| `inverse` / `focused` / `className` | — | — | Standard. |

## Usage examples
```tsx
import { List, ListItemNavigation } from 'arrow-react-bootstrap';

<List background="secondary">
  <ListItemNavigation
    label="Account details"
    navigationUrl="/account"
    leadingDecorationType="icon"
    leadingIcon={<svg viewBox="0 0 24 24"><path d="…" /></svg>}
    leadingDecorationA11yLabel="Account icon"
  />
  <ListItemNavigation label="Billing & payments" navigationUrl="/billing" />
  <ListItemNavigation label="Notifications" navigationUrl="/notifications" dividerPosition="none" />
</List>
```

## Composition
- Use inside `<List>` for proper `<ul>` semantics.
- Pair with `SectionHeader` to label the navigation group.

## Accessibility
- The row is a real `<a>` — Enter / click navigates. Do not wrap in another anchor.
- The trailing chevron is decorative; the accessible name comes from `label`.

## Do / Don't
- Do: keep labels parallel ("Plans", "Add-ons", "Devices").
- Do: prefer same-page anchors for in-app routing.
- Don't: handle navigation with `onClick` — let the anchor do its job.
- Don't: include any other interactive controls inside the row (no nested buttons or toggles).
