Breadcrumb

Default Breadcrumb

<script>
  import { Breadcrumb } from '$lib/index'
  let crumbs = [
    {
      label:'Home',
      href:'/'
    },
    {
      label:'Breadcrumb',
      href:'breadcrumbs/index'
    }
  ]
</script>

<Breadcrumb {crumbs} />

Solid Breadcrumb

<Breadcrumb {crumbs} solid/>

Props

The component has the following props, type, and default values. See types page for type information.

Name Type Default
crumbs CrumbType[] []
homeClass string 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white'
crumbClass string 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white'
solid boolean false

References