Litewind-vue documentation

Introduction

Components

Form Components

Directives

Tooltip

Breadcrumb

Component source on Github This page on Github

Reference

base"breadcrumb"

String

Base name used to style component

mod-iconempty string

String

Style of the icon element of the first item

mod-itemempty string

String

Style of the single breadcrumb item

mod-separatorempty string

String

Style of th breadcrumb separator

nameempty string

String

Name of the component

path[]

Array

Path of links to render

separator"/"

String

Character or string that seperates elements of the path

variantempty string

String

Active variant of the element mod-* props

Path

Path is an Array of Objects where each object should have label property and to or href property that are used as to prop for router-link. Optional icon property is a name of the icon that prepends element of the path.

let path = [
  {
    label: "Home",
    to: "/",
  },
  {
    label: "Documentation",
    to: "/",
  },
  {
    label: "Breadcrumb",
  },
],;

Example

    <template>
  <v-breadcrumb :path="example.path" />
</template>

    <script setup>
import { reactive } from "vue";

let example = reactive({
  path: [
    {
      label: "Home",
      to: "/",
      icon: "b-house-fill",
    },
    {
      label: "Documentation",
      to: "/documentation",
    },
    {
      label: "Breadcrumb",
    },
  ],
});
</script>