List group

The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.

Default list group

Here’s an example of a list group that you can use right away.

Profile
Settings
Messages
Download

List group with links

You can also display a series of links inside the list group element. Notice how items provide the `href` field. You need to set the list to `active` mode to enable hovering, focus and links. If list is active and data items contain `href` field entries are presented as `a` elements. You can pass extra properties to the `a` element by setting the `attrs` atrribute in the items list.

Accordions Alerts Badges Breadcrumbs

List group with buttons

It is also possible to display a list of button element inside the list group component. The following example includes an active and disabled item as well. You need to set the list to `active` mode to enable hovering, focus and `on:click`. If list is active and data items do not contain `href` field entries are presented as `button` elements triggering `on:click` events. You can pass extra properties to the `button` element by setting the `attrs` atrribute in the items list.

List group with icons

Use the following example to create a list of buttons as a menu together with SVG icons.

Advanced

When non standard usage is needed you can omit the `items` props and add elements directly to the list. Usage of hidden so far `ListgroupItem` helps you with proper layout.

User list

Delete user