Breadcrumb

<script lang="ts">
  import { Breadcrumb, BreadcrumbItem } from 'svelte-5-ui-lib';
</script>

<div class="overflow-x-scroll p-2 sm:p-6">
  <Breadcrumb>
    <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
    <BreadcrumbItem href="/">Projects</BreadcrumbItem>
    <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
  </Breadcrumb>
</div>

<script lang="ts">
  import { Breadcrumb, BreadcrumbItem } from 'svelte-5-ui-lib';
</script>

<div class="overflow-x-scroll p-2 sm:p-6">
  <Breadcrumb solid class="overflow-x-scroll">
    <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
    <BreadcrumbItem href="/">Projects</BreadcrumbItem>
    <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
  </Breadcrumb>
</div>

<script lang="ts">
  import { Breadcrumb, BreadcrumbItem } from 'svelte-5-ui-lib';
  import { ChevronDoubleRightOutline, HomeOutline } from "flowbite-svelte-icons";
</script>

<div class="overflow-x-scroll p-2 sm:p-6">
  <Breadcrumb class="overflow-x-scroll bg-gray-50 px-5 py-3 dark:bg-gray-900">
    <BreadcrumbItem href="/" home>
      {#snippet icon()}
        <HomeOutline class="me-2 h-4 w-4" />
      {/snippet}Home
    </BreadcrumbItem>
    <BreadcrumbItem href="/">
      {#snippet icon()}
        <ChevronDoubleRightOutline class="mx-2 h-5 w-5 dark:text-white" />
      {/snippet}
      Projects
    </BreadcrumbItem>
    <BreadcrumbItem>
      {#snippet icon()}
        <ChevronDoubleRightOutline class="mx-2 h-5 w-5 dark:text-white" />
      {/snippet}
      Flowbite Svelte
    </BreadcrumbItem>
  </Breadcrumb>
</div>