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


Dividers in their simplest form display a horizontal line.


v-dividerThe divider component.




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


Vertical dividers give you more tools for unique layouts.


By using the thickness prop, the thickness of the divider can be adjusted to the desired value.


Portrait View

Create custom cards to fit any use-case.


Dividers and subheaders can help break up content and can optionally line up with one another by using the same inset prop.


By default, v-divider components are assigned the WAI-ARIArole of separatorwhich denotes that the divider “separates and distinguishes sections of content or groups of menu items.” However, sometimes a divider is just a way to make an interface look nice. In those cases, the role of presentationshould be used which denotes “an element whose implicit native role semantics will not be mapped to the accessibility API.” To override the default separator role in a v-divider, simply add a role="presentation" prop to your component. In addition, v-divider components have an aria-orientation="horizontal". If vertical="true", then aria-orientation="vertical" will be set automatically as well. If role="presentation", aria-orientation="undefined", its default value.

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