2021-09-01 13:06:19 +00:00
|
|
|
# Breadcrumb Item
|
|
|
|
|
|
|
|
|
|
[component-header:sl-breadcrumb-item]
|
|
|
|
|
|
2021-09-13 12:12:51 +00:00
|
|
|
Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
|
2021-09-01 13:06:19 +00:00
|
|
|
|
|
|
|
|
```html preview
|
|
|
|
|
<sl-breadcrumb>
|
|
|
|
|
<sl-breadcrumb-item>
|
|
|
|
|
<sl-icon slot="prefix" name="house"></sl-icon>
|
|
|
|
|
Home
|
|
|
|
|
</sl-breadcrumb-item>
|
|
|
|
|
<sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
|
|
|
|
|
<sl-breadcrumb-item>Shirts</sl-breadcrumb-item>
|
|
|
|
|
</sl-breadcrumb>
|
|
|
|
|
```
|
|
|
|
|
|
2021-11-04 22:12:47 +00:00
|
|
|
```jsx react
|
|
|
|
|
import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
|
|
|
|
|
|
const App = () => (
|
|
|
|
|
<SlBreadcrumb>
|
|
|
|
|
<SlBreadcrumbItem>
|
|
|
|
|
<SlIcon slot="prefix" name="house"></SlIcon>
|
|
|
|
|
Home
|
|
|
|
|
</SlBreadcrumbItem>
|
|
|
|
|
<SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
|
|
|
|
|
<SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
|
|
|
|
|
</SlBreadcrumb>
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
|
2021-09-01 13:06:19 +00:00
|
|
|
?> Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
|
|
|
|
|
|
|
|
|
|
[component-metadata:sl-breadcrumb-item]
|
