salla-breadcrumb
A StencilJS component for rendering breadcrumb navigation.
A StencilJS component for rendering breadcrumb navigation.
q
Use it
In HTML or JSX, use the tag <salla-breadcrumb> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
This component has a native React version. Use it instead of the raw tag:
import { Breadcrumb } from '@salla.sa/twilight-theme-engine/common';Example
import { Breadcrumb } from '@salla.sa/twilight-theme-engine/common';
export function Example() {
return (
<Breadcrumb />
);
}import { Breadcrumb } from '@salla.sa/twilight-theme-engine/common';
export function Example() {
return (
<>
{/* Custom item and arrow markup; keep the s-breadcrumb-item class on the item */}
<Breadcrumb>
<li slot="item" className="s-breadcrumb-item"><a href="{url}">{'{'}title{'}'}</a></li>
<i slot="icon" className="sicon-arrow-left"></i>
</Breadcrumb>
</>
);
}Slots
| Slot | Description |
|---|---|
icon | Replaces the arrow icon shown between items. |
item | Replaces the markup of each breadcrumb item. The text {url} and {title} inside it are replaced with the item's link and title. |