www/docs/components/list-group.mdx
import ListGroupDefault from '!!raw-loader!../examples/ListGroup/Default'; import ListGroupLinked from '!!raw-loader!../examples/ListGroup/Linked'; import ListGroupActive from '!!raw-loader!../examples/ListGroup/Active'; import ListGroupDisabled from '!!raw-loader!../examples/ListGroup/Disabled'; import ListGroupStyle from '!!raw-loader!../examples/ListGroup/Style'; import ListGroupStyleActions from '!!raw-loader!../examples/ListGroup/StyleActions'; import ListGroupFlush from '!!raw-loader!../examples/ListGroup/Flush'; import ListGroupNumbered from '!!raw-loader!../examples/ListGroup/Numbered'; import ListGroupNumberedCustom from '!!raw-loader!../examples/ListGroup/NumberedCustom'; import ListGroupHorizontal from '!!raw-loader!../examples/ListGroup/Horizontal'; import ListGroupHorizontalResponsive from '!!raw-loader!../examples/ListGroup/HorizontalResponsive'; import ListGroupTabs from '!!raw-loader!../examples/ListGroup/Tabs';
Set the active prop to indicate the list groups current active selection.
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.
Toggle the action prop to create <em>actionable</em> 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.
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.
Add the numbered prop to opt into numbered list group items. Numbers are generated via CSS
(as opposed to a <ol>s default browser styling) for better placement inside list group items
and to allow for better customization.
These work great with custom content as well.
<CodeBlock language="jsx" live previewClassName="list-group"> {ListGroupNumberedCustom} </CodeBlock>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|xxl} makes the list group horizontal starting at that breakpoint’s min-width.
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.
:::info 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.
:::
You can also use the [Tab][tabs] 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.