quasar/src/components/breadcrumbs/QBreadcrumbs.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/breadcrumbs"
  },

  "props": {
    "separator": {
      "type": "String",
      "desc": "The string used to separate the breadcrumbs",
      "default": "'/'",
      "examples": [ "'-'", "'|'", "'>'" ],
      "category": "content"
    },

    "active-color": {
      "extends": "color",
      "desc": "The color of the active breadcrumb, which can be any color from the Quasar Color Palette",
      "default": "'primary'",
      "category": "style"
    },

    "gutter": {
      "type": "String",
      "desc": "The gutter value allows you control over the space between the breadcrumb elements.",
      "default": "'sm'",
      "values": [ "'none'", "'xs'", "'sm'", "'md'", "'lg'", "'xl'" ],
      "category": "content"
    },

    "separator-color": {
      "extends": "color",
      "desc": "The color used to color the separator, which can be any color from the Quasar Color Palette",
      "category": "style"
    },

    "align": {
      "type": "String",
      "desc": "Specify how to align the breadcrumbs horizontally",
      "values": [ "'left'", "'center'", "'right'", "'between'", "'around'", "'evenly'" ],
      "default": "'left'",
      "__runtimeDefault": true,
      "category": "content"
    }
  },

  "slots": {
    "default": {
      "extends": "default"
    },

    "separator": {
      "desc": "HTML or component you can slot in to separate the breadcrumbs"
    }
  }
}