<commit_before>---
title: Breadcrumbs
desc: The QBreadcrumbs Vue component is a navigational aid for your UI. It allows users to keep track of their location within programs, documents, or websites.
keys: QBreadcrumbs,QBreadcrumbsEl
---

The QBreadcrumbs component is used as a navigational aid in UI. It allows users to keep track of their location within programs, documents, or websites. Most common use is it's in a [QToolbar](/vue-components/toolbar), but it's not limited to it.


## QBreadcrumbs API

<doc-api file="QBreadcrumbs" />

## QBreadcrumbsEl API

<doc-api file="QBreadcrumbsEl" />

## Usage

### Basic

<doc-example title="Basic" file="QBreadcrumbs/Basic" />

<doc-example title="In a QToolbar" file="QBreadcrumbs/Toolbar" />

### Design

<doc-example title="Custom separators" file="QBreadcrumbs/Separator" />

<doc-example title="Gutters" file="QBreadcrumbs/Gutters" />

<doc-example title="Align" file="QBreadcrumbs/Align" />

### Connecting to Vue Router

The examples below won't work with UMD version (so in Codepen/jsFiddle too) because they depend on Vue Router.

<doc-example title="Router links" file="QBreadcrumbs/RouterLinks" />

You can also delay, cancel or redirect navigation, as seen below. For a more in-depth description of the `@click` event being used below, please refer to QBreadcrumbsEl API card at the top of the page.

<doc-example title="Links with delayed, cancelled or redirected navigation (v2.9+)" file="QBreadcrumbs/LinksWithGo" no-edit />
<commit_msg>feat(docs): minor - removed erroneous `it's` from breadcrumbs.md (#14694)<commit_after>---
title: Breadcrumbs
desc: The QBreadcrumbs Vue component is a navigational aid for your UI. It allows users to keep track of their location within programs, documents, or websites.
keys: QBreadcrumbs,QBreadcrumbsEl
---

The QBreadcrumbs component is used as a navigational aid in UI. It allows users to keep track of their location within programs, documents, or websites. Most common use is in a [QToolbar](/vue-components/toolbar), but it's not limited to it.


## QBreadcrumbs API

<doc-api file="QBreadcrumbs" />

## QBreadcrumbsEl API

<doc-api file="QBreadcrumbsEl" />

## Usage

### Basic

<doc-example title="Basic" file="QBreadcrumbs/Basic" />

<doc-example title="In a QToolbar" file="QBreadcrumbs/Toolbar" />

### Design

<doc-example title="Custom separators" file="QBreadcrumbs/Separator" />

<doc-example title="Gutters" file="QBreadcrumbs/Gutters" />

<doc-example title="Align" file="QBreadcrumbs/Align" />

### Connecting to Vue Router

The examples below won't work with UMD version (so in Codepen/jsFiddle too) because they depend on Vue Router.

<doc-example title="Router links" file="QBreadcrumbs/RouterLinks" />

You can also delay, cancel or redirect navigation, as seen below. For a more in-depth description of the `@click` event being used below, please refer to QBreadcrumbsEl API card at the top of the page.

<doc-example title="Links with delayed, cancelled or redirected navigation (v2.9+)" file="QBreadcrumbs/LinksWithGo" no-edit />

{'fraction_non_alphanumeric': 0.10664049721949624, 'fraction_numerical': 0.002944062806673209, 'mean_word_length': 4.9494163424124515, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6261445', 'n_tokens_mistral': 972, 'n_tokens_neox': 985, 'n_words': 348}