Documentation Index
Fetch the complete documentation index at: https://mintlify.com/vuetifyjs/vuetify/llms.txt
Use this file to discover all available pages before exploring further.
Divider
The VDivider component is used to separate content sections both horizontally and vertically. It can include text or icons and supports various styling options.
<template>
<v-divider />
</template>
Displays the divider vertically
Adds indentation to the divider
Applies specified color to the divider
Sets the thickness of the divider line
Sets the length of the divider (height for horizontal, width for vertical)
Sets the opacity of the divider border
Border style variant. Options: solid, dashed, dotted, double
Applies a gradient effect to the divider
Offset for divider content. Can be a single value or array of [margin, shift]
Slot for content to display in the middle of the divider
Examples
Basic Divider
<template>
<div>
<p>Content above</p>
<v-divider />
<p>Content below</p>
</div>
</template>
Vertical Divider
<template>
<div class="d-flex align-center" style="height: 100px;">
<div>Left content</div>
<v-divider vertical class="mx-4" />
<div>Right content</div>
</div>
</template>
Divider with Text
<template>
<div>
<v-divider>OR</v-divider>
</div>
</template>
Colored Dividers
<template>
<div>
<v-divider color="primary" thickness="2" />
<v-divider color="secondary" thickness="3" class="my-4" />
<v-divider color="error" thickness="4" />
</div>
</template>
Divider Variants
<template>
<div>
<p>Solid</p>
<v-divider variant="solid" />
<p class="mt-4">Dashed</p>
<v-divider variant="dashed" />
<p class="mt-4">Dotted</p>
<v-divider variant="dotted" />
<p class="mt-4">Double</p>
<v-divider variant="double" thickness="4" />
</div>
</template>
Inset Divider
<template>
<v-list>
<v-list-item title="Item 1" />
<v-divider inset />
<v-list-item title="Item 2" />
<v-divider inset />
<v-list-item title="Item 3" />
</v-list>
</template>
Divider with Custom Length
<template>
<div>
<v-divider length="50%" />
<v-divider length="200" class="my-4" />
</div>
</template>
Gradient Divider
<template>
<div>
<v-divider gradient color="primary" />
</div>
</template>
Divider with Content Offset
<template>
<div>
<v-divider :content-offset="20">
Section Title
</v-divider>
</div>
</template>
Divider in Navigation
<template>
<v-list>
<v-list-item title="Home" prepend-icon="mdi-home" />
<v-list-item title="Profile" prepend-icon="mdi-account" />
<v-divider class="my-2" />
<v-list-item title="Settings" prepend-icon="mdi-cog" />
<v-list-item title="Logout" prepend-icon="mdi-logout" />
</v-list>
</template>