The v-list component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists can contain children and are used in the sidebar.

Go to api


Lists can take an array of list items. When given an array, the list component will figure out the classes that are needed depending on what it was given. You can also define headers or dividers within the items array.

Lists also contain slots for a more explicit approach. If you choose this approach, remember you must provide additional props for correct spacing. In this example, we have a tile with an avatar, so we must provide an avatar property.

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

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. If you need more than 3 lines, it is adviced to use a card.

When a lists slot is used, you must manually define whether it contains headers, or if the items contain an avatar. This is required to maintain proper spacing.

Lists can contain multple subheaders and dividers.

A list can be combined with a card.

A list can contain a stack within an action. Ripple and router props can be passed through the main v-list, to the v-list-tile or as a property in the items array.

A list can contain up to 3 lines.

A list can contain a group of items which will display on click. Expansion lists are also used within the navigation drawer component.

A list can assume the alternate scheme color of dark.

The three-line prop uses -webkit-line-clamp which is not supported on all browsers. If not supported, the line will just continue to wrap.