Component breadcrumb

The breadcrumb component generates a navigational trail that shows users where they are within your site structure. It can be placed anywhere in your theme and automatically adapts to pages, posts, products, categories, and other content types.

Component Options

Add any option as an HTML attribute using the data-v-* syntax.

• absoluteURL — Use absolute URLs instead of relative ones. Useful when sharing links externally or when working with multi‑domain setups.
• blog — When viewing blog posts or blog categories, include the main blog URL in the breadcrumb trail.
• shop — When viewing products or product categories, include the main shop URL in the breadcrumb trail.

These options help you control how deep or minimal the breadcrumb structure should be.

Component Properties

Each breadcrumb item is rendered inside an element marked with data-v-breadcrumb-item. The following properties are available for each item:

• text — data-v-breadcrumb-item-text — The visible label of the breadcrumb item.
• url — data-v-breadcrumb-item-url — The link for the breadcrumb item. If empty, the item is displayed as plain text (typically the current page).

The component repeats these properties for every breadcrumb segment, from the homepage to the current page.

HTML Example

<nav aria-label="breadcrumb" class="text-muted text-small" data-v-component-breadcrumb>
  <ol class="breadcrumb">

    <li class="breadcrumb-item" data-v-breadcrumb-item>
      <a data-v-breadcrumb-item-url data-v-if="breadcrumb.url">
        <span data-v-breadcrumb-item-text>Home</span>
      </a>
      <span data-v-breadcrumb-item-text data-v-if-not="breadcrumb.url">Home</span>
    </li>

    <li class="breadcrumb-item" data-v-breadcrumb-item>
      <a data-v-breadcrumb-item-url data-v-if="breadcrumb.url">
        <span data-v-breadcrumb-item-text>Library</span>
      </a>
      <span data-v-breadcrumb-item-text data-v-if-not="breadcrumb.url">Library</span>
    </li>

    <li class="breadcrumb-item active" aria-current="page" data-v-breadcrumb-item>
      <span data-v-breadcrumb-item-text>Data</span>
    </li>

  </ol>
</nav>

This example shows a typical breadcrumb structure with conditional links: if a breadcrumb item has a URL, it is rendered as a link; otherwise, it appears as plain text (usually the current page).