webawesome/docs/pages/components/breadcrumb-item.md at c743561c25187cd5607de36ebeafbdf267f1faef

mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00

Files

Cory LaViska 1383ea3fe8 React import paths (#1507 )

* fix react imports in examples

* move types to definition files

* update changelog

* update changelog

2023-08-11 13:09:44 -04:00

1021 B

Raw Blame History

meta, layout

meta

layout

title	description
Breadcrumb Item	Breadcrumb Items are used inside breadcrumbs to represent different links.

component

<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>

import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';

const App = () => (
  <SlBreadcrumb>
    <SlBreadcrumbItem>
      <SlIcon slot="prefix" name="house"></SlIcon>
      Home
    </SlBreadcrumbItem>
    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
    <SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
  </SlBreadcrumb>
);

:::tip Additional demonstrations can be found in the breadcrumb examples. :::

1021 B Raw Blame History

1021 B

Raw Blame History