List Group

List groups support any content inside of them. Take advantage of their flexibility to display list of items, as well as vertical navigation.

Behind the scenes, the <IListGroupItem> is converted into a <RouterLink> if it has the :to property, or a plain <a> tag if it has a href property. Otherwise, it uses a simple <div> tag.

Color Variants

The list group component comes with a predefined set of basic color variants. You can set the color of a list group using the color property.

Size Variants

You're able to use the size modifier to control the padding of your list groups, using one of the available sizes: sm, md, and lg. The default size is set to md.

Active State

You can control the active state of your <IListGroupItem> using the active property.

If you're providing a to property, the list group item will be converted into a router-link or nuxt-link. You can use the active-class and exact-active-class properties and set them to -active when using it as a routing component.

Disabled State

You can control the disabled state of your <IListGroupItem> using the disabled property.

Borderless Variant

You can disable the border of your list group by setting the border property to false.

Item Content

The <IListGroupItem> accepts any type of content, allowing you to create large sized list group items.

Props

IListGroup
IListGroupItem

Slots

IListGroup
IListGroupItem

Design Tokens

IListGroup
IListGroupItem