Overview

Basic code structure involves using <ListGroup> and <ListGroup.Item>. Set the active prop to indicate the list groups current active selection.

Basic List

List Items

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.

Use .list-item-left-control,.list-item-right-control, and.list-item-leftright-control to add custom controls, buttons, or icons to list items. Be sure to include .modus-icon for 3rd party icons.

Borderless Lists

Add a class of .list-group-borderless to your List Group for a borderless variant.

Condensed Lists

Add a class of .list-group-condensed to your List Group for a smaller variant.

Large Lists

Add the .list-group-lg modifier class for a larger variant

API

ListGroup

import ListGroup from `@trimbleinc/modus-react-bootstrap/ListGroup`
NameTypeDefaultDescription
activeKey
EventKey
as
elementType

You can use a custom element type for this component.

defaultActiveKey
EventKey
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'

ListGroup.Item

import ListGroup.Item from `@trimbleinc/modus-react-bootstrap/ListGroup.Item`
NameTypeDefaultDescription
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 | number
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'