Breadcrumb Item
<afp-breadcrumb-item>
A single breadcrumb navigation item that represents one step in the navigation hierarchy.
Examples #
Current #
Use the current property to mark a breadcrumb item as the current page.
href #
Use href property to set the breadcrumb item's link.
Target #
Use the target property to set the target of the navigation link.
Separator Icon #
Use separator-icon slot to change the default separator icon.
Prefix #
Use the prefix slot to add prefix to the breadcrumb item.
Suffix #
Use the suffix slot to add suffix to the breadcrumb item.
Complex Breadcrumb Item #
Combine multiple features in a single breadcrumb item.
Custom CSS Properties #
Use CSS custom properties to customize the appearance of a breadcrumb item.
Properties
Learn more about properties.
| Name | Description | Reflects |
|---|---|---|
href
|
The URL this breadcrumb item should navigate to when clicked.
Type
string
|
|
target
|
The target for the navigation link.
Type
AfpTarget
|
|
current
|
Whether this breadcrumb item represents the current page.
Type
boolean
Default
false |
|
Events
Learn more about events.
| Name | Return | Description |
|---|---|---|
afp-click
|
{href: string | undefined, target: AfpTarget | undefined}
|
Emitted when the breadcrumb item is clicked.
|
Slots
Learn more about slots.
| Name | Description |
|---|---|
default
|
The default slot for the breadcrumb item content.
|
prefix
|
Content to show before the breadcrumb item text.
|
suffix
|
Content to show after the breadcrumb item text.
|
separator
|
Custom separator to display after the breadcrumb item.
|
Internationalization
Learn more about internationalization.
| Key | Description |
|---|---|
breadcrumb-item.current-page
|
Screen reader text for the current page indicator.
|
CSS Parts
Learn more about CSS Parts.
| Name | Description | Selector |
|---|---|---|
base
|
The component's base wrapper.
|
::part(base)
|
item
|
The breadcrumb item container.
|
::part(item)
|
link
|
The clickable link element.
|
::part(link)
|
label
|
The text label element.
|
::part(label)
|
separator-icon
|
The separator element between items.
|
::part(separator-icon)
|
separator-wrapper
|
The separator icon wrapper.
|
::part(separator-wrapper)
|
prefix
|
The prefix slot container.
|
::part(prefix)
|
suffix
|
The suffix slot container.
|
::part(suffix)
|
CSS Custom Properties
| Name | Description | Default |
|---|---|---|
--afp-breadcrumb-item-color
|
Text color for breadcrumb items.
|
--afp-color-text
|
--afp-breadcrumb-item-separator-color
|
Color of the separator icon.
|
--afp-color-text-subtle
|
--afp-breadcrumb-item-separator-size
|
Size of the separator icon.
|
--afp-font-size-xs
|
Dependencies
The component automatically brings in the listed items, including any nested dependencies that may exist.
Importing
Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.
import '@afp-design-system/core/dist/components/breadcrumb-item/breadcrumb-item.js';