@gitlab/ui/dist/components/base/breadcrumb/breadcrumb.documentation.js

GitLab UI Components

import examples from './examples';

var description = "## Breadcrumb\n\n<!-- STORY -->\n## Usage\n\nThis component provides two `<slot>` elements for customization. The first is a `<slot #avatar>` so an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to\ncustomize the icon that appears between each\nbreadcrumb.\n\n### Example\n\nYou can use any kind of separator you want in the slot, like below, which uses `<svg>`\nto draw a `/`\n\n```html\n<gl-breadcrumb :items=\"items\">\n  <template #avatar>\n    <img\n      class=\"gl-breadcrumb-avatar-tile\"\n      src=\"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15\"\n      width=\"15\"\n      height=\"15\"\n    />\n  </template>\n  <template #separator>\n    <svg width=\"100\" height=\"15\">\n      <line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"gray\" />\n    </svg>\n  </template>\n</gl-breadcrumb>\n```\n";

var breadcrumb_documentation = {
  followsDesignSystem: true,
  examples: examples,
  description: description,
  bootstrapComponent: 'b-breadcrumb'
};

export default breadcrumb_documentation;