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.
| Component | CSS Part Prefix |
|---|---|
|
|
separator-icon
- The separator element between items.
|
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';