HxListGroup

Bootstrap 5 List group component.
List groups are a flexible and powerful component for displaying a series of content.

Basic example #

An item
A second item
A third item
A fourth item
And a fifth one
<HxListGroup>
    <HxListGroupItem>An item</HxListGroupItem>
    <HxListGroupItem>A second item</HxListGroupItem>
    <HxListGroupItem>A third item</HxListGroupItem>
    <HxListGroupItem>A fourth item</HxListGroupItem>
    <HxListGroupItem>And a fifth one</HxListGroupItem>
</HxListGroup>

Active and disabled items #

Set Active="true" to the list-group item to indicate the current active selection. Set Enabled="false" to the list-group item to make it appear disabled.

An active item
A second item
A third item
A fourth item
A disabled item

Use <HxListGroupItemNavLink /> component to create a link item in list-group.

Buttons #

Add OnClick parameter to make the list-group item behave like a button.

The current button
A second item
A third item
A fourth item
And a fifth one

Last button clicked:

Flush #

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

An item
A second item
A third item
A fourth item
And a fifth one

Numbered #

Add the Numbered="true" parameter to opt into numbered list group items.

An item
A second item
A third item
A fourth item
And a fifth one

These work great with custom content as well.

Subheading
Cras justo odio
14
Subheading
Cras justo odio
14
Subheading
Cras justo odio
14

Horizontal #

Use Horizontal parameter to change the layout of the list group items from vertical to horizontal (incl. responsive breakpoint).

An item
A second item
A third item

Colors #

Use Color parameter to set contextual color for list-group item.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Last click color:

With badges #

Add badges to any list group item to show unread counts, activity, and more.

A list item 14
A second item 2
A third item 1

Custom content #

Add nearly any component or element within.

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HxListGroup component.
ChildContent RenderFragment Content of the list group component.
CssClass string Additional CSS class.
Flush bool If set to true, removes borders and rounded corners to render list group items edge-to-edge.
Horizontal ListGroupHorizontal Changes the layout of the list group items from vertical to horizontal. Cannot be combined with Flush.
Numbered bool Set to true to opt into numbered list group items. The list group changes from an unordered list to an ordered list.

HxListGroupItem

Item for HxListGroup.

API

Parameters

Name Type Description
Active bool Indicates the current active selection.
ChildContent RenderFragment Content of the item.
Color ThemeColor? Color.
CssClass string Additional CSS class.
Enabled bool Make the item appear disabled by setting to false. Default is true.
OnClick EventCallback<MouseEventArgs> An event that is fired when the HxListGroupItem is clicked.
An unhandled error has occurred. Reload 🗙