Divider

The v-divider component is used to separate sections of lists.

Usage

Full bleed dividers extend the entire content width.

API

v-divider
Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
inset
Default
false
Type
boolean

Adds indentation (72px) for normal dividers, reduces max height for vertical.

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
vertical New in — v1.1
Default
false
Type
boolean

Creates a vertical divider

Examples

Light and dark

Dividers have light and dark variants.

Inset dividers

Inset dividers are moved 72px to the right. This will cause them to line up with list items.

Subheaders and dividers

Subheaders can be lined up with inset dividers by using the same prop.

List dividers

Inset dividers and subheaders can help break up content

Dividers in Portrait View

Create custom cards to fit any use-case

Vertical dividers

Vertical dividers give you even more tools for unique layouts.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore