flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/docs/components/bottom-navigation.md

@@ -0,0 +1,397 @@
+---
+layout: componentLayout
+title: Svelte Bottom Navigation - Flowbite
+breadcrumb_title: Svelte Bottom Navigation
+component_title: Bottom Navigation
+dir: Components
+description: Use the bottom navigation bar component to allow users to navigate through your website or create a control bar using a menu that is positioned at the bottom of the page
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+
+  const components = 'BottomNav, BottomNavHeader, BottomNavHeaderItem, BottomNavItem'
+</script>
+
+The bottom bar component can be used to allow menu items and certain control actions to be performed by the user through the usage of a fixed bar positioning to the bottom side of your page.
+
+Check out multiple examples of the bottom navigation component based on various styles, controls, sizes, content and leverage the utility classes from Tailwind CSS to integrate into your own project.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { BottomNav, BottomNavItem } from 'flowbite-svelte';
+</script>
+```
+
+## Default bottom navigation
+
+Use the default bottom navigation bar example to show a list of menu items as buttons to allow the user to navigate through your website based on a fixed position. You can also use anchor tags instead of buttons.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { BottomNav, BottomNavItem, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="pb-20" />
+
+<BottomNav position="absolute" classInner="grid-cols-4">
+  <BottomNavItem btnName="Home">
+    <HomeSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+  </BottomNavItem>
+  <BottomNavItem btnName="Wallet">
+    <WalletSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+  </BottomNavItem>
+  <BottomNavItem btnName="Settings">
+    <AdjustmentsVerticalOutline class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+  </BottomNavItem>
+  <BottomNavItem btnName="Profile">
+    <UserCircleSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+  </BottomNavItem>
+</BottomNav>
+```
+
+## Adding links and active class
+
+Utilize the `href` prop within the `BottomNavItem` component to incorporate a hyperlink. To initiate the application of the active class, include the `activeUrl` prop within the `BottomNav` component.
+
+By default, the `BottomNavItem` will only be set to active if the `href` and the `activeUrl` are exactly the same. If you want the current item to match nested pages you can set the `exact` prop on `BottomNavItem` to false. In the following example, the `Quickstart` button will match `/docs/pages/quickstart` or `/docs/pages/quickstart/step-1`. All other buttons will only match the exact defined `href`.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { BottomNav, BottomNavItem, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid } from 'flowbite-svelte-icons';
+  import { page } from '$app/stores';
+  $: activeUrl = $page.url.pathname;
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="pb-20" />
+
+<BottomNav {activeUrl} position="absolute" classInner="grid-cols-4">
+  <BottomNavItem btnName="Home" href="/">
+    <HomeSolid />
+  </BottomNavItem>
+  <BottomNavItem btnName="Quickstart" href="/docs/pages/quickstart" exact={false}>
+    <WalletSolid />
+  </BottomNavItem>
+  <BottomNavItem btnName="BottomNav" href="/docs/components/bottom-navigation">
+    <AdjustmentsVerticalOutline />
+  </BottomNavItem>
+  <BottomNavItem btnName="Accordion" href="/docs/components/accordion">
+    <UserCircleSolid />
+  </BottomNavItem>
+</BottomNav>
+```
+
+The following example shows how to change active class, by overwriting `activeClass` with the `classActive` prop.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { BottomNav, BottomNavItem, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid } from 'flowbite-svelte-icons';
+  import { page } from '$app/stores';
+  $: activeUrl = $page.url.pathname;
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="pb-20" />
+
+<BottomNav {activeUrl} position="absolute" classInner="grid-cols-4" classActive="font-bold text-green-500 hover:text-green-900 dark:hover:text-green-700 dark:text-green-300">
+  <BottomNavItem btnName="Home" href="/">
+    <HomeSolid />
+  </BottomNavItem>
+  <BottomNavItem btnName="Quickstart" href="/docs/pages/quickstart">
+    <WalletSolid />
+  </BottomNavItem>
+  <BottomNavItem btnName="BottomNav" href="/docs/components/bottom-navigation">
+    <AdjustmentsVerticalOutline />
+  </BottomNavItem>
+  <BottomNavItem btnName="Accordion" href="/docs/components/accordion">
+    <UserCircleSolid />
+  </BottomNavItem>
+</BottomNav>
+```
+
+Use the following example to change the icon colors:
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { page } from '$app/stores';
+  import { BottomNav, BottomNavItem, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid } from 'flowbite-svelte-icons';
+  $: activeUrl = $page.url.pathname;
+  let svgClass = 'mb-1 text-pink-500 dark:text-pink-400 group-hover:text-pink-600 dark:group-hover:text-pink-500';
+  let svgActiveClass = 'mb-1 text-green-500 dark:text-green-500 group-hover:text-green-700 dark:group-hover:text-green-700';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="pb-20" />
+
+<BottomNav {activeUrl} position="absolute" classInner="grid-cols-4">
+  <BottomNavItem btnName="Home" href="/">
+    <HomeSolid class={activeUrl === '/' ? svgActiveClass : svgClass} />
+  </BottomNavItem>
+  <BottomNavItem btnName="Quickstart" href="/docs/pages/quickstart">
+    <WalletSolid class={activeUrl === '/docs/pages/quickstart' ? svgActiveClass : svgClass} />
+  </BottomNavItem>
+  <BottomNavItem btnName="BottomNav" href="/docs/components/bottom-navigation">
+    <AdjustmentsVerticalOutline class={activeUrl === '/docs/components/bottom-navigation' ? svgActiveClass : svgClass} />
+  </BottomNavItem>
+  <BottomNavItem btnName="Accordion" href="/docs/components/accordion">
+    <UserCircleSolid class={activeUrl === '/docs/components/accordion' ? svgActiveClass : svgClass} />
+  </BottomNavItem>
+</BottomNav>
+```
+
+## Menu items with border
+
+This example can be used to show a border between the menu items inside the bottom navbar.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { BottomNav, BottomNavItem, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="pb-20" />
+
+<BottomNav position="absolute" navType="border" classInner="grid-cols-4">
+  <BottomNavItem btnName="Home">
+    <HomeSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+  </BottomNavItem>
+  <BottomNavItem btnName="Wallet">
+    <WalletSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+  </BottomNavItem>
+  <BottomNavItem btnName="Settings">
+    <AdjustmentsVerticalOutline class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+  </BottomNavItem>
+  <BottomNavItem btnName="Profile">
+    <UserCircleSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+  </BottomNavItem>
+</BottomNav>
+```
+
+## Application bar example
+
+Use this example to show a CTA button in the center of the navigation component to create new items.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { BottomNav, BottomNavItem, Tooltip, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid, PlusSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="pb-20" />
+
+<BottomNav position="absolute" navType="application" classInner="grid-cols-5">
+  <BottomNavItem btnName="Home" appBtnPosition="left">
+    <HomeSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Home</Tooltip>
+  </BottomNavItem>
+  <BottomNavItem btnName="Wallet" appBtnPosition="middle">
+    <WalletSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Wallet</Tooltip>
+  </BottomNavItem>
+  <div class="flex items-center justify-center">
+    <BottomNavItem btnName="Create new item" appBtnPosition="middle" btnClass="inline-flex items-center justify-center w-10 h-10 font-medium bg-primary-600 rounded-full hover:bg-primary-700 group focus:ring-4 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-800">
+      <PlusSolid class="text-white" />
+      <Tooltip arrow={false}>Create new item</Tooltip>
+    </BottomNavItem>
+  </div>
+  <BottomNavItem btnName="Settings" appBtnPosition="middle">
+    <AdjustmentsVerticalOutline class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Settings</Tooltip>
+  </BottomNavItem>
+  <BottomNavItem btnName="Profile" appBtnPosition="right">
+    <UserCircleSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Profile</Tooltip>
+  </BottomNavItem>
+</BottomNav>
+```
+
+## Example with pagination
+
+This example be used to paginate multiple pages on a single view alongside other menu items.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { BottomNav, BottomNavItem, Tooltip, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { FilePlusSolid, BookmarkSolid, AngleLeftSolid, AngleRightSolid, AdjustmentsVerticalOutline, UserCircleSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="pb-20" />
+
+<BottomNav position="absolute" navType="pagination" classInner="grid-cols-6">
+  <BottomNavItem btnName="New document">
+    <FilePlusSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>New document</Tooltip>
+  </BottomNavItem>
+  <BottomNavItem btnName="Bookmark">
+    <BookmarkSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Bookmark</Tooltip>
+  </BottomNavItem>
+  <div class="flex items-center justify-center col-span-2">
+    <div class="flex items-center justify-between w-full text-gray-600 dark:text-gray-400 bg-gray-100 rounded-lg dark:bg-gray-600 max-w-[128px] mx-2">
+      <button type="button" class="inline-flex items-center justify-center h-8 px-1 bg-gray-100 rounded-l-lg dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-800">
+        <AngleLeftSolid class="w-2 h-2 ml-1" />
+        <span class="sr-only">Previous page</span>
+      </button>
+      <span class="flex-shrink-0 mx-1 text-sm font-medium">1 of 345</span>
+      <button type="button" class="inline-flex items-center justify-center h-8 px-1 bg-gray-100 rounded-r-lg dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-800">
+        <AngleRightSolid class="w-2 h-2 mr-1" />
+        <span class="sr-only">Next page</span>
+      </button>
+    </div>
+  </div>
+  <BottomNavItem btnName="Settings">
+    <AdjustmentsVerticalOutline class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Settings</Tooltip>
+  </BottomNavItem>
+  <BottomNavItem btnName="Profile">
+    <UserCircleSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Profile</Tooltip>
+  </BottomNavItem>
+</BottomNav>
+```
+
+## Button group bottom bar
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { BottomNav, BottomNavItem, BottomNavHeader, BottomNavHeaderItem, Tooltip, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { HomeSolid, BookmarkSolid, PlusSolid, SearchOutline,  AdjustmentsVerticalOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="pb-20" />
+
+<BottomNav position="absolute" navType="group" classInner="grid-cols-5">
+  <BottomNavHeader slot="header">
+    <BottomNavHeaderItem itemName="New" />
+    <BottomNavHeaderItem itemName="Popular" active={true} />
+    <BottomNavHeaderItem itemName="Following" />
+  </BottomNavHeader>
+  <BottomNavItem btnName="Home" id="group-home">
+    <HomeSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Home</Tooltip>
+  </BottomNavItem>
+  <BottomNavItem btnName="Bookmark" id="group-bookmark">
+    <BookmarkSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Bookmark</Tooltip>
+  </BottomNavItem>
+  <BottomNavItem btnName="New post" id="group-new">
+    <PlusSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>New Post</Tooltip>
+  </BottomNavItem>
+  <BottomNavItem btnName="Search" id="group-search">
+    <SearchOutline class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Search</Tooltip>
+  </BottomNavItem>
+  <BottomNavItem btnName="Settings" id="group-settings">
+    <AdjustmentsVerticalOutline class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    <Tooltip arrow={false}>Settings</Tooltip>
+  </BottomNavItem>
+</BottomNav>
+```
+
+## Card with bottom bar
+
+This example can be used to position a bottom navigation bar inside of a card element with scroll enabled on the Y axis to allow changing the content inside of the card, enable certain actions or show a list of menu items.
+
+You can even use the other bottom navbar examples to exchange the default one presented here.
+
+```svelte example class="flex justify-center"
+<script>
+  import { BottomNav, BottomNavItem, Card, Listgroup, Avatar } from 'flowbite-svelte';
+  import { ClockSolid, UserGroupSolid, StarSolid } from 'flowbite-svelte-icons';
+  let list = [
+    {
+      img: { src: '/images/profile-picture-1.webp', alt: 'Neil Sims' },
+      comment: 'New message from <span class="font-medium text-gray-900 dark:text-white">Jese Leos</span>: "Hey, what\'s up? All set for the presentation?"',
+      message: 'a few moments ago'
+    },
+    {
+      img: { src: '/images/profile-picture-2.webp', alt: 'Bonnie Green' },
+      comment: 'Joseph McFall and <span class="font-medium text-gray-900 dark:text-white">5 others</span> started following you.',
+      message: '10 minutes ago'
+    },
+    {
+      img: { src: '/images/profile-picture-3.webp', alt: 'Leslie Livingston' },
+      comment: 'Bonnie Green and <span class="font-medium text-gray-900 dark:text-white">141 others</span> love your story. See it and view more stories.',
+      message: '23 minutes ago'
+    },
+    {
+      img: { src: '/images/profile-picture-4.webp', alt: 'Robert Brown' },
+      comment: 'Leslie Livingston mentioned you in a comment: <span class="font-medium text-primary-600 dark:text-primary-500 hover:underline">@bonnie.green</span> what do you say?',
+      message: '23 minutes ago'
+    },
+    {
+      img: { src: '/images/profile-picture-5.webp', alt: 'Michael Gough' },
+      comment: 'Robert Brown</span> posted a new video: Glassmorphism - learn how to implement the new design trend.',
+      message: '23 minutes ago'
+    }
+  ];
+</script>
+
+<Card padding="none" class="relative overflow-y-scroll bg-white border border-gray-100 rounded-lg dark:bg-gray-700 dark:border-gray-600 h-96">
+  <Listgroup items={list} let:item class="border-0 dark:!bg-transparent">
+    <a href="/" class="flex items-center justify-center w-full px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800">
+      <Avatar src={item.img.src} alt={item.img.alt} class="flex-shrink-0 mr-3" />
+      <div>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{@html item.comment}</p>
+        <span class="text-xs text-primary-600 dark:text-primary-500">{@html item.message}</span>
+      </div>
+    </a>
+  </Listgroup>
+  <BottomNav position="sticky" navType="card" classInner="grid-cols-3 pt-2 pb-4">
+    <BottomNavItem btnName="Latest" id="card-latest">
+      <ClockSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    </BottomNavItem>
+    <BottomNavItem btnName="Following" id="card-following">
+      <UserGroupSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    </BottomNavItem>
+    <BottomNavItem btnName="Favorites" id="card-favorites">
+      <StarSolid class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" />
+    </BottomNavItem>
+  </BottomNav>
+</Card>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### BottomNav styling
+
+- Use the `classOuter` prop to overwrite `outerClass`.
+- Use the `classInner` prop to overwrite `innerClass`.
+- Use the `classActive` prop to overwrite `activeClass`.
+
+### BottomNavHeader styling
+
+- Use the `classOuter` prop to overwrite `outerClass`.
+- Use the `classInner` prop to overwrite `innerClass`.
+
+### BottomNavHeaderItem styling
+
+- Use the `class` prop to overwrite `defaultClass` or `activeClass`.
+
+### BottomNavItem styling
+
+- Use the `btnClass` prop to overwrite the `button` tag class.
+- Use the `spanClass` prop to overwrite the `span` tag class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Bottom Navigation](https://flowbite.com/docs/components/bottom-navigation/)

package/src/routes/docs/components/breadcrumb.md

@@ -0,0 +1,112 @@
+---
+layout: componentLayout
+title: Svelte Breadcrumb - Flowbite
+breadcrumb_title: Svelte Breadcrumb
+component_title: Breadcrumb
+dir: Components
+description: Show the location of the current page in a hierarchical structure using the breadcrumb components
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
+  const components = 'Breadcrumb, BreadcrumbItem'
+</script>
+
+The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
+
+Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+</script>
+```
+
+## Default Breadcrumb
+
+Use the following breadcrumb example to show the hierarchical structure of pages.
+
+```svelte example hideScript
+<script>
+  import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+</script>
+
+<Breadcrumb aria-label="Default breadcrumb example">
+  <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
+  <BreadcrumbItem href="/">Projects</BreadcrumbItem>
+  <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
+</Breadcrumb>
+```
+
+## Solid Breadcrumb
+
+You can alternatively also use the breadcrumb components with a solid background.
+
+```svelte example hideScript
+<script>
+  import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+</script>
+
+<Breadcrumb aria-label="Solid background breadcrumb example" solid>
+  <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
+  <BreadcrumbItem href="/">Projects</BreadcrumbItem>
+  <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
+</Breadcrumb>
+```
+
+## Icons
+
+Use the `icon` slot to change icons.
+
+```svelte example
+<script>
+  import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+  import { HomeOutline, ChevronDoubleRightOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Breadcrumb aria-label="Solid background breadcrumb example" class="bg-gray-50 py-3 px-5 dark:bg-gray-900">
+  <BreadcrumbItem href="/" home>
+    <svelte:fragment slot="icon">
+      <HomeOutline class="w-4 h-4 mr-2" />
+    </svelte:fragment>Home
+  </BreadcrumbItem>
+  <BreadcrumbItem href="/">
+    <svelte:fragment slot="icon">
+      <ChevronDoubleRightOutline class="w-3 h-3 mx-2 dark:text-white" />
+    </svelte:fragment>
+    Projects
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <svelte:fragment slot="icon">
+      <ChevronDoubleRightOutline class="w-3 h-3 mx-2 dark:text-white" />
+    </svelte:fragment>
+    Flowbite Svelte
+  </BreadcrumbItem>
+</Breadcrumb>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Breadcrumb styling
+
+- Use the `class` prop to overwrite a class in the `nav` tag
+- Use the `classOl` prop to overwrite a class in the `ol` tag.
+
+### BreadcrumbItem styling
+
+- Use the `class` prop to overwrite a class in the `li` tag
+- Use the `classHome` prop to overwrite `homeClass`.
+- Use the `classLink` prop to overwrite `linkClass`.
+- Use the `classSpan` prop to overwrite `spanClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Breadcrumb](https://flowbite.com/docs/components/breadcrumb/)