List Group

Example

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

List Group Example
Active
Link Router Link
Item
Disabled

Behind the scenes, the <i-list-group-item> is converted into a <router-link> if it has the :to property, or a plain <a> tag if it has a href property. Otherwise, it uses a simple <div> tag.

Sizes

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.

List Group Sizes
List Group Item
List Group Item
List Group Item
List Group Item
 
List Group Item
List Group Item
List Group Item
List Group Item
 
List Group Item
List Group Item
List Group Item
List Group Item

Active State

You can control the active state of your <i-list-group-item> using the active property. If you're providing a :to property, converting it into a router-link, you can use the active-class and exact-active-class properties and set them to -active.

List Group Active State

Disabled State

You can control the disabled state of your <i-list-group-item> using the disabled property.

List Group Disabled State
Disabled List Group Item
List Group Item

List Group Border

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

List Group Border
List Group Item
List Group Item
List Group Item
List Group Item

Item Content

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

List Group Item Content

List Group Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

List Group Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

List Group Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

API

List Group API <i-list-group>
Property Description Type Accepted Default
bordered Sets the list group component style to be bordered. Boolean true, false true
size Sets the size of the list group component. String sm, md, lg md
List Group Item API <i-list-group-item>
Property Description Type Accepted Default
active Sets the list group item state as active. Boolean true, false false
disabled Sets the list group item state as disabled. Boolean true, false false
tag Sets the tag to be used for the component. If to or href attribute is provided, an a tag will be used. String div