React Bootstrap List Group

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.

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.

ExampleCopy Anchor Link

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.

ClassesCopy Anchor Link

Selectable itemsCopy Anchor Link

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:

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 routesCopy Anchor Link

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:

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 badgesCopy Anchor Link

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

<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 cardCopy Anchor Link

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:

<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>

AccessibilityCopy Anchor Link

• 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}.

RelatedCopy Anchor Link

• Next.js Bootstrap list group: the same markup in AdminKit for Next.js
• Bootstrap 5 list group: the list group of the HTML version
• Cards: the container most list groups sit in
• Cards demo: a flush list group inside a card