List groups

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.

Basic Example

Active items

Set the active prop to indicate the list groups current active selection.

Disabled items

Set the disabled prop to prevent actions on a <ListGroup.Item>. For elements that aren't naturally disable-able (like anchors) onClick handlers are added that call preventDefault to mimick disabled behavior.

Actionable items

Toggle the action prop to create actionable list group items, with disabled, hover and active styles. List item actions will render a <button> or <a> (depending on the presence of an href) by default but can be overridden by setting the as prop as usual.

List items actions are distinct from plain items to ensure that click or tap affordances aren't applied to non-interactive items.

Flush

Add the flush variant to remove outer borders and rounded corners to render list group items edge-to-edge in a parent container such as a Card.

Horizontal

Use the horizontal prop to make the ListGroup render horizontally. Currently horizontal list groups cannot be combined with flush list groups.

There are responsive variants to horizontal: setting it to {sm|md|lg|xl} makes the list group horizontal starting at that breakpoint’s min-width.

Contextual classes

Use contextual variants on <ListGroup.Item>s to style them with a stateful background and color.

When paired with actions, additional hover and active styles apply.

Tabbed Interfaces

You can also use the Tab components to create ARIA compliant tabbable interfaces with the <ListGroup> component. Swap out the <Nav> component for the list group and you are good to go.

API

ListGroup

import ListGroup from 'react-bootstrap/ListGroup'Copy import code for the ListGroup component
Name Type Default Description
activeKey
unknown
as
elementType

You can use a custom element type for this component.
defaultActiveKey
unknown
horizontal
true | 'sm' | 'md' | 'lg' | 'xl'
 undefined

Changes the flow of the list group items from vertical to horizontal. A value of null (the default) sets it to vertical for all breakpoints; Just including the prop sets it for all breakpoints, while {sm|md|lg|xl} makes the list group horizontal starting at that breakpoint’s min-width.
onSelect
SelectCallback
variant
'flush'
 undefined

Adds a variant to the list-group
bsPrefix
string
 'list-group'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

ListGroup.Item

import ListGroup from 'react-bootstrap/ListGroup'Copy import code for the ListGroup component
Name Type Default Description
action
boolean

Marks a ListGroupItem as actionable, applying additional hover, active and disabled styles for links and buttons.
active
boolean
 false

Sets list item as active
as
elementType
 <{div | a | button}>

You can use a custom element type for this component. For none action items, items render as li. For actions the default is an achor or button element depending on whether a href is provided.
disabled
boolean
 false

Sets list item state as disabled
eventKey
string

A unique identifier for the Component, the eventKey makes it distinguishable from others in a set. Similar to React's key prop, in that it only needs to be unique amongst the Components siblings, not globally.
href
string
onClick
function
variant
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'
 undefined

Sets contextual classes for list item
bsPrefix
string
 'list-group-item'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/list-group/