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

Links

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

HxListGroupItem

Item for HxListGroup.

API

Parameters

Name Type Description
ChildContent RenderFragment Content of the item.
Active bool Indicates the current active selection.
Enabled bool Make the item appear disabled by setting to false. Default is true.
Color ThemeColor? Color.
CssClass string Additional CSS class.

Event Callbacks

Name Type Description
OnClick EventCallback An event that is fired when the HxListGroupItem is clicked.
An unhandled error has occurred. Reload 🗙