Breadcrumb Item

A breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in relation to the site's structure, from top level to current page, or a list of the links the user followed to get to the current page, in the order visited.

Breadcrumb trails enable users to be aware of their location within a website. This type of navigation, if done correctly, helps users know where they are in a site and how they got there. They can also help a user get back to where they were before and can reduce the number of clicks needed to get to a higher-level page.

— Definition from the MDN web docs

Common usage

Use breadcrumb items to create breadcrumb trails for websites that have hierarchically arranged pages. You shouldn't use breadcrumb items for single-level websites that have no logical hierarchy or grouping.

Text

The breadcrumb item's displayed text.

Loading...

Live Editor

<qds-breadcrumb-item text="Example"></qds-breadcrumb-item>

href

The URL that the inline link points to. Inline links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers.

Note

The divider icon will only show up on breadcrumb items that are given a href, thus this should not be done with the last item in the list. The presence of this property will turn the breadcrumb item from a li into an a tag.

Loading...

Live Editor

<div class="inline-flex" style={{ gap: '10px' }}>
  <qds-breadcrumb-item text="Example" href="https://www.example.com/page.html"></qds-breadcrumb-item>
  <qds-breadcrumb-item text="Last"></qds-breadcrumb-item>
</div>

Implementation tips

Importing

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

Import

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsBreadcrumbItem } from 'https://cdn.jsdelivr.net/npm/@quartzds/core@next+esm'
defineCustomElementQdsBreadcrumbItem()

Bundler

To import this component using a bundler:

import { defineCustomElementQdsBreadcrumbItem } from '@quartzds/core'
defineCustomElementQdsBreadcrumbItem()

Angular

To import this component as an Angular component:

import { QdsBreadcrumbItem } from '@quartzds/core-angular'

React

To import this component as a React component:

import { QdsBreadcrumbItem } from '@quartzds/core-react'

Vue

To import this component as a Vue component:

import { QdsBreadcrumbItem } from '@quartzds/core-vue'

Component reference

Properties

Attribute / PropertyTypeDescriptionDefault

href

string | undefined

The URL that the inline link points to. Inline links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

• Sections of a page with document fragments
• While web browsers may not support other URL schemes, websites can with registerProtocolHandler()

undefined

hreflang

string | undefined

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

undefined

referrerpolicy / referrerPolicy

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined

How much of the referrer to send when following the inline link.

• no-referrer: The Referer header will not be sent.
• no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
• origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
• origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
• same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
• strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
• strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
• unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe because it leaks origins and paths from TLS-protected resources to insecure origins.

undefined

rel

string | undefined

The relationship of the linked URL as space-separated link types.

The following list includes some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.

• alternate: Alternate representations of the current document.
• author: Author of the current document or article.
• bookmark: Permalink for the nearest ancestor section.
• external: The referenced document is not part of the same site as the current document. An icon will be rendered next to the text if this value is specified.
• help: Link to context-sensitive help.
• license: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
• me: Indicates that the current document represents the person who owns the linked content.
• next: Indicates that the current document is a part of a series and that the next document in the series is the referenced document.
• nofollow: Indicates that the current document's original author or publisher does not endorse the referenced document.
• noopener: Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate target attribute value).
• noreferrer: No Referer header will be included. Additionally, has the same effect as noopener.
• opener: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value).
• prev: Indicates that the current document is a part of a series and that the previous document in the series is the referenced document.
• search: Gives a link to a resource that can be used to search through the current document and its related pages.
• tag: Gives a tag (identified by the given address) that applies to the current document.

undefined

target

"_blank" | "_parent" | "_self" | "_top" | string & Record<never, never> | undefined

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>. The following keywords have special meanings for where to load the URL:

• _blank: usually a new tab, but users can configure browsers to open a new window instead.
• _parent: the parent browsing context of the current one. If no parent, behaves as _self.
• _self: the current browsing context.
• _top: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self.

undefined

text

string

The breadcrumb item's text.

undefined