# React Bootstrap List Group

React Bootstrap list group markup in AdminKit: lists rendered from arrays, selectable items from state, NavLink items, badges and flush lists in cards.

A list group shows a series of related items, one under the other. The demo uses them in cards, in the navbar's message and notification menus, and in the settings navigation. List groups work in the free and PRO versions of [AdminKit for React](/react/).

A list group is Bootstrap's `.list-group` and `.list-group-item` classes in JSX. There is no component to import. You usually render the items from an array with `map`.

## Example

```html
<ul class="list-group">
  <li class="list-group-item">Design review</li>
  <li class="list-group-item">Sprint planning</li>
  <li class="list-group-item">Release notes</li>
</ul>
```
```tsx code
const tasks = [
  { id: 1, title: "Design review" },
  { id: 2, title: "Sprint planning" },
  { id: 3, title: "Release notes" },
];

<ul className="list-group">
  {tasks.map((task) => (
    <li key={task.id} className="list-group-item">
      {task.title}
    </li>
  ))}
</ul>
```

Use a stable `key` from your data, such as an `id`, not the array index, so React keeps the right item when the list changes.

## Classes

| Class | Effect |
| --- | --- |
| `list-group` | The container: a `<ul>`, `<ol>` or `<div>` |
| `list-group-item` | One item |
| `list-group-item-action` | Hover and focus styles for an item that is a link or a button |
| `active`, `disabled` | The selected or disabled item |
| `list-group-flush` | No outer borders and corners, for a list inside a card |
| `list-group-numbered` | Numbers the items with CSS, on an `<ol>` |
| `list-group-horizontal` | Lays the items out in a row; `list-group-horizontal-md` from a breakpoint up |
| `list-group-item-<color>` | An item in a theme color: `list-group-item-success`, ... |

## Selectable items

Sometimes the user picks one item from the list, such as a folder. Make each item a `<button>` with `list-group-item-action`, and keep the selected item in state:

```html
<div class="list-group" style="max-width: 20rem;">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">Inbox</button>
  <button type="button" class="list-group-item list-group-item-action">Sent</button>
  <button type="button" class="list-group-item list-group-item-action">Archive</button>
</div>
```
```tsx code
import { useState } from "react";
import { cx } from "@/lib/cx";

const folders = ["Inbox", "Sent", "Archive"];

export function FolderList() {
  const [folder, setFolder] = useState("Inbox");

  return (
    <div className="list-group">
      {folders.map((name) => (
        <button
          key={name}
          type="button"
          className={cx("list-group-item list-group-item-action", name === folder && "active")}
          aria-current={name === folder ? "true" : undefined}
          onClick={() => setFolder(name)}
        >
          {name}
        </button>
      ))}
    </div>
  );
}
```

## Links to routes

A list group also works as navigation between pages. For a list of pages, use React Router's `NavLink`. It adds the `active` class and `aria-current="page"` to the link of the current route, so you do not track it yourself:

```tsx
import { NavLink } from "react-router";

const sections = [
  { to: "/pages-settings", label: "Account" },
  { to: "/pages-profile", label: "Profile" },
];

<div className="list-group list-group-flush">
  {sections.map((section) => (
    <NavLink key={section.to} to={section.to} className="list-group-item list-group-item-action">
      {section.label}
    </NavLink>
  ))}
</div>
```

AdminKit removes the underline of `a.list-group-item`.

## With badges

Add a badge when each item has a count, such as open tickets. Flex utilities put the counter at the end of each item:

```html
<ul class="list-group" style="max-width: 20rem;">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Open tickets
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Overdue
    <span class="badge bg-danger rounded-pill">2</span>
  </li>
</ul>
```
```tsx code
<ul className="list-group">
  {queues.map((queue) => (
    <li
      key={queue.id}
      className="list-group-item d-flex justify-content-between align-items-center"
    >
      {queue.name}
      <span className={`badge bg-${queue.color} rounded-pill`}>{queue.count}</span>
    </li>
  ))}
</ul>
```

## In a card

Inside a card, a list looks best without its own outer border. `list-group-flush` makes the list run edge to edge in a `.card`, as on the cards demo:

```html
<div class="card" style="max-width: 20rem;">
  <div class="card-header">
    <h2 class="card-title mb-0">Recent activity</h2>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Invoice #1042 paid</li>
    <li class="list-group-item">New client added</li>
    <li class="list-group-item">Project archived</li>
  </ul>
</div>
```
```tsx code
<div className="card">
  <div className="card-header">
    <h2 className="card-title mb-0">Recent activity</h2>
  </div>
  <ul className="list-group list-group-flush">
    <li className="list-group-item">Invoice #1042 paid</li>
    <li className="list-group-item">New client added</li>
    <li className="list-group-item">Project archived</li>
  </ul>
</div>
```

## Accessibility

- Mark the selected item with `aria-current`, not only with the `active` class. `NavLink` does it for you.
- Use `<button>` items for actions and links for navigation, and never `.btn` classes on list group items.
- A checkbox in an item needs a `<label htmlFor>` or an `aria-label`.
- `disabled` on a `<button>` item is enough. A disabled link needs `aria-disabled="true"` and `tabIndex={-1}`.

## Related

- [Next.js Bootstrap list group](/nextjs/docs/components/list-group/): the same markup in AdminKit for Next.js
- [Bootstrap 5 list group](/bootstrap/docs/components/list-group/): the list group of the HTML version
- [Cards](/react/docs/components/card/): the container most list groups sit in
- [Cards demo](https://react-demo.adminkit.io/ui-cards): a flush list group inside a card

---

Canonical HTML page: https://adminkit.io/react/docs/components/list-group/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io