React List Group - Flowbite

Get started with the list group component to show a list of elements and menu items inside of an unordered list item built with React and Tailwind CSS

The list group component can be used to show a list of items inside of an unordered list for website navigation, show a list of items inside of a card, and more.

You can choose from one of the examples below based on various styles and options and you can customize the component with React props and the classes from Tailwind CSS.

Start using the list group component by first importing it from Flowbite React:

'use client';

import { ListGroup } from 'flowbite-react';

Table of Contents#

Default list group#

Use the default example to create a simple list of items inside of a menu by using the ListGroup component with ListGroup.Item child components inside of it.

Edit on GitHub
  • React TypeScript
'use client';

import { ListGroup } from 'flowbite-react';

export default function DefaultListGroup() {
  return (
    <ListGroup>
      <ListGroup.Item>
        Profile
      </ListGroup.Item>
      <ListGroup.Item>
        Settings
      </ListGroup.Item>
      <ListGroup.Item>
        Messages
      </ListGroup.Item>
      <ListGroup.Item>
        Download
      </ListGroup.Item>
    </ListGroup>
  )
}

List items as links#

Convert the list items into links by adding the href prop to the ListGroup.Item component.

Edit on GitHub
  • React TypeScript
'use client';

import { ListGroup } from 'flowbite-react';

export default function ListGroupWithLinks() {
  return (
    <ListGroup>
      <ListGroup.Item
        active
        href="/list-group"
      >
        <p>
          Profile
        </p>
      </ListGroup.Item>
      <ListGroup.Item href="/list-group">
        Settings
      </ListGroup.Item>
      <ListGroup.Item href="/list-group">
        Messages
      </ListGroup.Item>
      <ListGroup.Item href="/list-group">
        Download
      </ListGroup.Item>
    </ListGroup>
  )
}

List group with buttons#

To create custom actions inside of the list group, use the onClick prop on the ListGroup.Item component.

Edit on GitHub
  • React TypeScript
'use client';

import { ListGroup } from 'flowbite-react';

export default function ListGroupWithButtons() {
  return (
    <ListGroup>
      <ListGroup.Item
        active
        onClick={()=>alert("Profile clicked!")}
      >
        <p>
          Profile
        </p>
      </ListGroup.Item>
      <ListGroup.Item>
        Settings
      </ListGroup.Item>
      <ListGroup.Item>
        Messages
      </ListGroup.Item>
      <ListGroup.Item>
        Download
      </ListGroup.Item>
    </ListGroup>
  )
}

List group with icons#

Add icons to the list group items by using the icon prop on the ListGroup.Item component.

Edit on GitHub
  • React TypeScript
'use client';

import { ListGroup } from 'flowbite-react';
import { HiCloudDownload, HiInbox, HiOutlineAdjustments } from 'react-icons/hi';

export default function ListGroupWithIcons() {
  return (
    <ListGroup>
      <ListGroup.Item
        active
        icon={HiUserCircle}
      >
        <p>
          Profile
        </p>
      </ListGroup.Item>
      <ListGroup.Item icon={HiOutlineAdjustments}>
        Settings
      </ListGroup.Item>
      <ListGroup.Item icon={HiInbox}>
        Messages
      </ListGroup.Item>
      <ListGroup.Item icon={HiCloudDownload}>
        Download
      </ListGroup.Item>
    </ListGroup>
  )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "list-none rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-left"
  },
  "item": {
    "base": "[&>*]:first:rounded-t-lg [&>*]:last:rounded-b-lg [&>*]:last:border-b-0",
    "link": {
      "base": "flex items-center w-full border-b border-gray-200 py-2 px-4 dark:border-gray-600",
      "active": {
        "off": "hover:bg-gray-100 hover:text-cyan-700 focus:text-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-500",
        "on": "bg-cyan-700 text-white dark:bg-gray-800"
      },
      "href": {
        "off": "",
        "on": ""
      },
      "icon": "mr-2 h-4 w-4 fill-current"
    }
  }
}

References#