Timelines

The v-timeline is useful for stylistically displaying chronological information.

API

Examples

Props

Direction

Switch between a horizontal and vertical timeline in real-time using the direction prop.

v-timeline/prop-direction.vue

Side

Use the side property to force all items to one side of the timeline.

v-timeline/prop-single-side.vue

Alignment

By default, v-timeline-item content is vertically aligned center. The align prop also supports top alignment.

v-timeline/prop-align.vue

Dot color

Colored dots create visual breakpoints that make your timelines easier for users to read.

v-timeline/prop-color.vue

Icon dots

Use icons within the v-timeline-item dot to provide additional context.

v-timeline/prop-icon-dots.vue

Size

The size prop allows you to customize the size of each dot.

v-timeline/prop-size.vue

Truncated line

Truncate the start, end or both ends of the timeline center line by using the truncate-line prop.

v-timeline/prop-truncate-line.vue

Line inset

Modify the inset of dividing lines by specifying a custom amount using the line-inset prop.

v-timeline/prop-line-inset.vue

Slots

Icon

Insert avatars into dots with use of the icon slot and v-avatar.

v-timeline/slot-icon.vue

Opposite

The opposite slot provides an additional layer of customization within your timelines.

v-timeline/slot-opposite.vue

Misc

Advanced

v-timeline/misc-advanced.vue

Ready for more?

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