Breadcrumb Item
<quiet-breadcrumb-item>
Breadcrumb items represent a single link or step in the hierarchical structure of an app or website.
This component must only be used within a breadcrumb. You can see some examples of breadcrumb items being used in the breadcrumb documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-breadcrumb-item> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/breadcrumb-item/breadcrumb-item.js';
To manually import <quiet-breadcrumb-item> from npm, use the following code.
import '@quietui/quiet/dist/components/breadcrumb-item/breadcrumb-item.js';
Slots Jump to heading
Breadcrumb Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The default slot. |
start
|
An icon or similar element to place before the breadcrumb item. Works great with
<quiet-icon>.
|
end
|
An icon or similar element to place after the breadcrumb item. Works great with
<quiet-icon>.
|
separator
|
A custom separator to show instead of the default. Works great with <quiet-icon>.
|
Properties Jump to heading
Breadcrumb Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
current
|
Indicates that this item is the current page or view. |
|
boolean
|
false
|
href
|
The URL the breadcrumb item should point to. If omitted, the breadcrumb item will be drawn as a
<span> instead of a link, enabling alternate content such as dropdowns.
|
|
string
|
|
target
|
Opens the link in the specified target. |
|
'_blank'
|
|
rel
|
Sets the link's rel attribute. Note that the default value is
noreferrer noopener, meaning you might need to set it to an empty string if you're also
using target.
|
|
string
|
'noreferrer noopener'
|
CSS parts Jump to heading
Breadcrumb Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
label |
The breadcrumb's label, an <a> element if href is set or a
<span> element otherwise.
|
::part(label)
|
separator |
The container that wraps the breadcrumb's separator, a span element.
|
::part(separator)
|