The v-list component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.


Lists come in three main variations. single-line (default), two-line and three-line. The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.


v-listPrimary Component
v-list-groupSub-component used to display or hide groups of items
v-list-subheaderSub-component used to separate groups of items
v-list-itemSub-component used to display a single item or modify the v-list state
v-list-item-titleSub-component used to display the title of a list item. Wraps the #title slot
v-list-item-subtitleSub-component used to display the subtitle of a list item. Wraps the #subtitle slot
v-list-item-actionSub-component used to display v-checkboxor v-switch
v-list-imgSub-component that is used to wrap a the v-imgcomponent
v-list-item-mediaSub-component that is used to wrap a the v-imgcomponent




Lists can either be created by markup using the many sub-components that are available, or by using the items prop.

To customize which properties will be used for the title and value of each item, use the item-title and item-value props.

If you need to render subheaders or dividers, add an item with a type property. Which property to use can be customized using the item-type prop.

To customize individual items, you can use the item-props prop. It defaults to looking for a props property on the items. The value should be an object, and if found it will be spread on the v-list-item component.

If item-props is set to true then the whole item will be spread.


v-list supports the density property.


You cannot interact with disabled v-list.


v-list supports the variant prop.


You can make v-list items rounded.


Shaped lists have rounded borders on one side of the v-list-item.

Sub group

Using the v-list-group component you can create sub-groups of items.

Three line

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses line-clampand is not supported in all browsers.

Two lines and subheader

Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line.


Action and item groups

A three-line list with actions. Utilizing v-list-group, easily connect actions to your tiles.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub