List group

React Bootstrap 5 List group component

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Note: Read the API tab to find all available options and advanced customization

Basic example

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup style={{ minWidth: '22rem' }}>
                <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
              </MDBListGroup>
            );
          }

Active items

Add active property to a <MDBListGroupItem> to indicate the current active selection.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup style={{ minWidth: '22rem' }}>
                <MDBListGroupItem active aria-current='true'>Cras justo odio</MDBListGroupItem>
                <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
              </MDBListGroup>
            );
          }

Disabled items

Add disabled property to a <MDBListGroupItem> to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup style={{ minWidth: '22rem' }}>
                <MDBListGroupItem disabled aria-disabled='true'>Cras justo odio</MDBListGroupItem>
                <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
              </MDBListGroup>
            );
          }

Flush

Add flush property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup flush style={{ minWidth: '22rem' }}>
                <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
              </MDBListGroup>
            );
          }

Horizontal

Add horizontal property to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant using horizontalSize="sm|md|lg|xl|xxl" to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.

ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <div>
                <MDBListGroup horizontal>
                  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                  <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                  <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                  <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                  <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
                </MDBListGroup>
  
                <MDBListGroup horizontal horizontalSize='sm'>
                  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                  <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                  <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                  <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                  <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
                </MDBListGroup>
  
                <MDBListGroup horizontal horizontalSize='md'>
                  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                  <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                  <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                  <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                  <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
                </MDBListGroup>
  
                <MDBListGroup horizontal horizontalSize='lg'>
                  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                  <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                  <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                  <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                  <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
                </MDBListGroup>
  
                <MDBListGroup horizontal horizontalSize='xl'>
                  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                  <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                  <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                  <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                  <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
                </MDBListGroup>
  
                <MDBListGroup horizontal horizontalSize='xxl'>
                  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                  <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                  <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                  <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                  <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
                </MDBListGroup>
              </div>
            );
          }

Contextual classes

Use color property to style list items with a stateful background and color.

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup style={{ minWidth: '22rem' }}>
                <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                <MDBListGroupItem color='primary'>A simple primary list group item</MDBListGroupItem>
                <MDBListGroupItem color='secondary'>A simple secondary list group item</MDBListGroupItem>
                <MDBListGroupItem color='success'>A simple success list group item</MDBListGroupItem>
                <MDBListGroupItem color='danger'>A simple danger list group item</MDBListGroupItem>
                <MDBListGroupItem color='warning'>A simple warning list group item</MDBListGroupItem>
                <MDBListGroupItem color='info'>A simple info list group item</MDBListGroupItem>
                <MDBListGroupItem color='light'>A simple light list group item</MDBListGroupItem>
                <MDBListGroupItem color='dark'>A simple dark list group item</MDBListGroupItem>
              </MDBListGroup>
            );
          }

color property also works with action property. Note the addition of the hover styles here not present in the previous example. Also supported is the active state; apply it to indicate an active selection on a contextual list group item.

Dapibus ac facilisis in A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item 
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <div>
                <MDBListGroup style={{ minWidth: '22rem' }}>
                  <MDBListGroupItem tag='a' href='#' action>
                    Dapibus ac facilisis in
                  </MDBListGroupItem>
                  <MDBListGroupItem tag='a' href='#' action color='primary'>
                    A simple primary list group item
                  </MDBListGroupItem>
                  <MDBListGroupItem tag='a' href='#' action color='secondary'>
                    A simple secondary list group item
                  </MDBListGroupItem>
                  <MDBListGroupItem tag='a' href='#' action color='success'>
                    A simple success list group item
                  </MDBListGroupItem>
                  <MDBListGroupItem tag='a' href='#' action color='danger'>
                    A simple danger list group item
                  </MDBListGroupItem>
                  <MDBListGroupItem tag='a' href='#' action color='warning'>
                    A simple warning list group item
                  </MDBListGroupItem>
                  <MDBListGroupItem tag='a' href='#' action color='info'>
                    A simple info list group item
                  </MDBListGroupItem>
                  <MDBListGroupItem tag='a' href='#' action color='light'>
                    A simple light list group item
                  </MDBListGroupItem>
                  <MDBListGroupItem tag='a' href='#' action color='dark'>
                    A simple dark list group item
                  </MDBListGroupItem>
                </MDBListGroup>
              </div>
            );
          }

Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Badges

Add badges to any list group item to show unread counts, activity, and more with the help of some flexbox utilities.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1 
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem, MDBBadge } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup style={{ minWidth: '22rem' }}>
                <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
                  Cras justo odio
                  <MDBBadge pill>14</MDBBadge>
                </MDBListGroupItem>
  
                <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
                  Dapibus ac facilisis in
                  <MDBBadge pill>2</MDBBadge>
                </MDBListGroupItem>
  
                <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
                  Morbi leo risus
                  <MDBBadge pill>1</MDBBadge>
                </MDBListGroupItem>
              </MDBListGroup>
            );
          }

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup tag='div'>
                <MDBListGroupItem tag='a' href='#' action active aria-current='true'>
                  <div className='d-flex w-100 justify-content-between'>
                    <h5 className='mb-1'>List group item heading</h5>
                    <small>3 days ago</small>
                  </div>
                  <p className='mb-1'>
                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                  </p>
                  <small>Donec id elit non mi porta.</small>
                </MDBListGroupItem>
                <MDBListGroupItem tag='a' href='#' action>
                  <div className='d-flex w-100 justify-content-between'>
                    <h5 className='mb-1'>List group item heading</h5>
                    <small className='text-muted'>3 days ago</small>
                  </div>
                  <p className='mb-1'>
                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                  </p>
                  <small className='text-muted'>Donec id elit non mi porta.</small>
                </MDBListGroupItem>
                <MDBListGroupItem tag='a' href='#' action>
                  <div className='d-flex w-100 justify-content-between'>
                    <h5 className='mb-1'>List group item heading</h5>
                    <small className='text-muted'>3 days ago</small>
                  </div>
                  <p className='mb-1'>
                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                  </p>
                  <small className='text-muted'>Donec id elit non mi porta.</small>
                </MDBListGroupItem>
              </MDBListGroup>
            );
          }

Checkboxes

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros 
        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem, MDBCheckbox } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup style={{ minWidth: '22rem' }}>
                <MDBListGroupItem>
                  <MDBCheckbox inline />
                  Cras justo odio
                </MDBListGroupItem>
  
                <MDBListGroupItem>
                  <MDBCheckbox inline />
                  Dapibus ac facilisis in
                </MDBListGroupItem>
  
                <MDBListGroupItem>
                  <MDBCheckbox inline />
                  Morbi leo risus
                </MDBListGroupItem>
  
                <MDBListGroupItem>
                  <MDBCheckbox inline />
                  Porta ac consectetur ac
                </MDBListGroupItem>
  
                <MDBListGroupItem>
                  <MDBCheckbox inline />
                  Vestibulum at eros
                </MDBListGroupItem>
              </MDBListGroup>
            );
          }

And if you want tag="label"s as the <MDBListGroupItem> property for large hit areas, you can do that, too. 

        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem, MDBCheckbox } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBListGroup style={{ minWidth: '22rem' }}>
                <MDBListGroupItem tag='label'>
                  <MDBCheckbox label='Cras justo odio' />
                </MDBListGroupItem>
  
                <MDBListGroupItem tag='label'>
                  <MDBCheckbox label='Dapibus ac facilisis in' />
                </MDBListGroupItem>
  
                <MDBListGroupItem tag='label'>
                  <MDBCheckbox label='Morbi leo risus' />
                </MDBListGroupItem>
  
                <MDBListGroupItem tag='label'>
                  <MDBCheckbox label='Porta ac consectetur ac' />
                </MDBListGroupItem>
  
                <MDBListGroupItem tag='label'>
                  <MDBCheckbox label='Vestibulum at eros' />
                </MDBListGroupItem>
              </MDBListGroup>
            );
          }

List group - API

Import

        
            
          import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

Properties

MDBListGroup

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBListGroup element <MDBListGroup tag="ol" />
className String '' Add custom class to MDBListGroup <MDBListGroup className="class" />
horizontal Boolean '' Creates a horizontal list group <MDBListGroup horizontal />
horizontalSize String '' Allows to set a horizontal breakpoint, if the horizontal property is set <MDBListGroup horizontal horizontalSize="lg" />
flush Boolean '' Render an MDBListGroup component without some borders <MDBListGroup flush />

MDBListGroupItem

Name Type Default Description Example
tag String 'li' Defines tag of the MDBListGroupItem element <MDBListGroupItem tag="a" />
className String '' Add custom class to MDBListGroupItem <MDBListGroupItem className="class" />
active Boolean '' Adds an .active class to the MDBListGroupItem <MDBListGroupItem active />
disabled Boolean '' Disables an MDBListGroupItem component <MDBListGroupItem disabled />
action Boolean '' Makes an MDBListGroupItem component actionable <MDBListGroupItem action />
color String '' Sets a color for the MDBListGroupItem component <MDBListGroupItem color="secondary" />