Breadcrumbs

Allows you to see the entire path from the parent section to the section in which the user is now located and go to one or more levels above.

Basic usage

TIP

Set icon inside template to use icon for the breadcrumb item.

Example

<BreadcrumbItem to="/">
  <template #icon>
    <IconDot16 />
  </template>
  Home
</BreadcrumbItem>

Source code

<script setup>
  import BreadcrumbItem from '@/components/breadcrumbs/breadcrumbItem.vue';
  import Breadcrumbs from '@/components/breadcrumbs/breadcrumbs.vue';
</script>

<template>
  <Breadcrumbs>
    <BreadcrumbItem
      to="/"
    >
      Home
    </BreadcrumbItem>
    <BreadcrumbItem to="/products">
      Products
    </BreadcrumbItem>
    <BreadcrumbItem to="/customers">
      Customers
    </BreadcrumbItem>
  </Breadcrumbs>
<!--  <Breadcrumbs :max-items="maxItems"> -->
<!--    <BreadcrumbItem -->
<!--      to="/" -->
<!--    > -->
<!--      <template #icon> -->
<!--        <IconDot16 /> -->
<!--      </template> -->
<!--      Home -->
<!--    </BreadcrumbItem> -->
<!--    <BreadcrumbItem -->
<!--      to="/test" -->
<!--    > -->
<!--      Test -->
<!--    </BreadcrumbItem> -->
<!--    <BreadcrumbItem -->
<!--      to="/wow" -->
<!--    > -->
<!--      Wow -->
<!--    </BreadcrumbItem> -->
<!--    <BreadcrumbItem -->
<!--      to="/products" -->
<!--    > -->
<!--      <template #icon> -->
<!--        <IconDot16 /> -->
<!--      </template> -->
<!--      Products -->
<!--    </BreadcrumbItem> -->
<!--    <BreadcrumbItem -->
<!--      to="/customer" -->
<!--    > -->
<!--      <template #icon> -->
<!--        <IconDot16 /> -->
<!--      </template> -->
<!--      Customers -->
<!--    </BreadcrumbItem> -->
<!--  </Breadcrumbs> -->
</template>

Max items

TIP

Set max-items to set the max bread crumb items shown. The rest will be hidden in a dropdown menu. Truncation starts from the 2nd item. The first item and the last item will always be shown, i.e. max-items should be larger than 2.

Source code

<script setup>
  import BreadcrumbItem from '@/components/breadcrumbs/breadcrumbItem.vue';
  // import { createRouter, createWebHashHistory } from 'vue-router';
  import Breadcrumbs from '@/components/breadcrumbs/breadcrumbs.vue';

  // const router = createRouter({
  //   history: createWebHashHistory(),
  //   routes: [
  //     {
  //       path: '/',
  //       component: {
  //         template: '<div>Home</div>',
  //       },
  //     },
  //   ],
  // });

  // const { app } = getCurrentInstance().appContext;
  // app.use(router);

  function onClick() {
    console.log('clicked');
  }
</script>

<template>
  <Breadcrumbs :max-items="3">
    <BreadcrumbItem to="/">
      Home
    </BreadcrumbItem>
    <BreadcrumbItem
      to="/first"
    >
      First item (link)
    </BreadcrumbItem>
    <BreadcrumbItem
      to="/second"
    >
      Second item (link)
    </BreadcrumbItem>
    <BreadcrumbItem
      @click="onClick"
    >
      Third item (click)
    </BreadcrumbItem>
  </Breadcrumbs>
  <!--    <BreadcrumbLink -->
  <!--      icon="i-folder-o&#45;&#45;16" -->
  <!--      @click="onClick" -->
  <!--    > -->
  <!--      Fourth item (click) -->
  <!--    </BreadcrumbLink> -->
  <!--    <BreadcrumbLink -->
  <!--      icon="i-folder-o&#45;&#45;16" -->
  <!--      @click="onClick" -->
  <!--    > -->
  <!--      Fifth item (click) -->
  <!--    </BreadcrumbLink> -->
  <!--    <BreadcrumbLink -->
  <!--      icon="i-folder-o&#45;&#45;16" -->
  <!--      @click="onClick" -->
  <!--    > -->
  <!--      a (click) -->
  <!--    </BreadcrumbLink> -->
  <!--    <BreadcrumbLink icon="i-customer-o&#45;&#45;16"> -->
  <!--      Active item -->
  <!--    </BreadcrumbLink> -->
</template>

Icon separator

INFO

In the acv-breadcrumbs component, each acv-breadcrumb-item wraps an acv-breadcrumb-link and allows you to use an icon as the separator between breadcrumb items. The separator icon is defined using the separator-icon attribute, which accepts an icon component. By default, this is set to the IconChevronRight16 icon, but you can customize it with any icon of your choice.

Source code

<script setup>
  import BreadcrumbItem from '@/components/breadcrumbs/breadcrumbItem.vue';
  import Breadcrumbs from '@/components/breadcrumbs/breadcrumbs.vue';
  // import { IconChevronRight16 } from '@acronis-platform/icons/chevron';
  import { IconArrowRight16 } from '@acronis-platform/icons/arrow';
</script>

<template>
  <Breadcrumbs :separator-icon="IconArrowRight16">
    <BreadcrumbItem to="/">
      Home
    </BreadcrumbItem>
    <BreadcrumbItem to="/products">
      Products
    </BreadcrumbItem>
    <BreadcrumbItem to="/customers">
      Customers
    </BreadcrumbItem>
  </Breadcrumbs>
</template>

Character separator

INFO

Set the separator attribute to a character (e.g., /) to use it as the separator between breadcrumb items.

2. /
4. /

Source code

<script setup>
  import BreadcrumbItem from '@/components/breadcrumbs/breadcrumbItem.vue';
  import Breadcrumbs from '@/components/breadcrumbs/breadcrumbs.vue';
</script>

<template>
  <Breadcrumbs separator="/">
    <BreadcrumbItem to="/">
      Home
    </BreadcrumbItem>
    <BreadcrumbItem to="/products">
      Products
    </BreadcrumbItem>
    <BreadcrumbItem to="/customers">
      Customers
    </BreadcrumbItem>
  </Breadcrumbs>
</template>

Multiline

INFO

Use the multiline attribute to enable wrapping of breadcrumb items, preventing overflow when there are too many items to fit in a single line.

Source code

<script setup>
  import BreadcrumbItem from '@/components/breadcrumbs/breadcrumbItem.vue';
  // import { createRouter, createWebHashHistory } from 'vue-router';
  // import { getCurrentInstance } from 'vue';
  import Breadcrumbs from '@/components/breadcrumbs/breadcrumbs.vue';

  // const router = createRouter({
  //   history: createWebHashHistory(),
  //   routes: [
  //     {
  //       path: '/',
  //       component: {
  //         template: '<div>Home</div>',
  //       },
  //     },
  //   ],
  // });
  //
  // const { app } = getCurrentInstance().appContext;
  // app.use(router);

  function onClick() {
    console.log('clicked');
  }
</script>

<template>
  <Breadcrumbs multiline>
    <BreadcrumbItem to="/">
      Home
    </BreadcrumbItem>
    <BreadcrumbItem to="/first">
      First item (link)
    </BreadcrumbItem>
    <BreadcrumbItem to="/second">
      Second item (link)
    </BreadcrumbItem>
    <BreadcrumbItem
      @click="onClick"
    >
      Third item (click)
    </BreadcrumbItem>
    <BreadcrumbItem to="/fourth">
      Fourth item (click)
    </BreadcrumbItem>
  </Breadcrumbs>
  <!--    <BreadcrumbLink -->
  <!--      icon="i-folder-o&#45;&#45;16" -->
  <!--      @click="onClick" -->
  <!--    > -->
  <!--      Fourth item (click) -->
  <!--    </BreadcrumbLink> -->
  <!--    <BreadcrumbLink -->
  <!--      icon="i-folder-o&#45;&#45;16" -->
  <!--      @click="onClick" -->
  <!--    > -->
  <!--      Fifth item (click) -->
  <!--    </BreadcrumbLink> -->
  <!--    <BreadcrumbLink -->
  <!--      icon="i-folder-o&#45;&#45;16" -->
  <!--      @click="onClick" -->
  <!--    > -->
  <!--      a (click) -->
  <!--    </BreadcrumbLink> -->
  <!--    <BreadcrumbLink icon="i-customer-o&#45;&#45;16"> -->
  <!--      Active item -->
  <!--    </BreadcrumbLink> -->
</template>

Accessibility

Provided AcvBreadcrumbs component must adapt to the list of WAI-ARIA accessibility patterns.

Overview

A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.

WAI-ARIA attributes

• aria-label: The breadcrumb trail should have an aria-label or aria-labelledby attribute that describes the purpose of the breadcrumb trail.
• aria-current: The last item in the breadcrumb trail should have an aria-current attribute set to page to indicate the current page.

Related components

• BreadcrumbItem
• BreadcrumbLink
• Dropdown

Props

Prop name	Description	Type	Values	Default
maxItems	Maximum number of items to display	number	-	Infinity
multiline	Breadcrumb will be wrapped to multiple lines if true	boolean	-
separatorIcon	Separator icon/character between breadcrumbs	Component	-	IconChevronRight16
separator		string	-
size	Size of the breadcrumbs	"md" | "lg"	-	'md'

Events

Event name	Properties	Description
click	eventName mixed - undefined path string - The path of the clicked item	Triggered when a breadcrumb item is clicked

Slots

Name	Description	Bindings
default	Default slot for breadcrumb items