Svelte Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS with Svelte breadcrumb.

Example

<BreadCrumb>
  <BreadcrumbItem key="home" active={true}>
      Home
  </BreadcrumbItem>
</BreadCrumb>

<BreadCrumb>
  <BreadcrumbItem key="home">
    <a href="/">
      Home
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem key="home" active={true}>
      Library
  </BreadcrumbItem>
</BreadCrumb>

<BreadCrumb>
  <BreadcrumbItem key="home">
    <a href="/">
      Home
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem key="home">
    <a href="/">
      Library
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem key="home" active={true}>
      Data
  </BreadcrumbItem>
</BreadCrumb>

Dark

<BreadCrumb listClasses="breadcrumb-dark">
  <BreadcrumbItem key="home" active={true}>
      Home
  </BreadcrumbItem>
</BreadCrumb>

<BreadCrumb listClasses="breadcrumb-dark bg-primary">
  <BreadcrumbItem key="home">
    <a href="/">
      Home
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem key="home" active={true}>
      Library
  </BreadcrumbItem>
</BreadCrumb>

<BreadCrumb  listClasses="breadcrumb-dark bg-danger">
  <BreadcrumbItem key="home">
    <a href="/">
      Home
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem key="home">
    <a href="/">
      Library
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem key="home" active={true}>
      Data
  </BreadcrumbItem>
</BreadCrumb>
<BreadCrumb listClasses="breadcrumb-links">
  <BreadcrumbItem key="home">
    <a href="/">
      Home
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem key="home">
    <a href="/">
      Library
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem key="home" active={true}>
      Data
  </BreadcrumbItem>
</BreadCrumb>