No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Breadcrumb
 
Svelte Breadcrumb - Bootstrap 4 & Material Design
  
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
 
Basic Example
   
  
 
 
<script>

  import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer } from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBreadcrumb>
    <MDBBreadcrumbItem active >Home</MDBBreadcrumbItem>
  </MDBBreadcrumb>

  <MDBBreadcrumb>
    <MDBBreadcrumbItem href="/home">Home</MDBBreadcrumbItem>
    <MDBBreadcrumbItem active >Library</MDBBreadcrumbItem>
  </MDBBreadcrumb>

  <MDBBreadcrumb>
    <MDBBreadcrumbItem href="/home">Home</MDBBreadcrumbItem>
    <MDBBreadcrumbItem href="/library">Library</MDBBreadcrumbItem>
    <MDBBreadcrumbItem active >Data</MDBBreadcrumbItem>
  </MDBBreadcrumb>
</MDBContainer>

 
Breadcrumbs with dark background
   
  
 
 
<script>

  import {MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer} from "mdbsvelte";
</script>
<style>
  :global(.light-font .breadcrumb-item + .breadcrumb-item::before, .light-font a ) {
    color: #fff;
  }

  :global(.light-font .breadcrumb-item.active) {
    color: #cfd8dc;
  }


</style>
<MDBContainer>
  <div class="light-font">
    <MDBBreadcrumb color="default">
      <MDBBreadcrumbItem active>Home</MDBBreadcrumbItem>
    </MDBBreadcrumb>

    <MDBBreadcrumb color="primary">
      <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
      <MDBBreadcrumbItem active>Library</MDBBreadcrumbItem>
    </MDBBreadcrumb>

    <MDBBreadcrumb color="secondary">
      <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
      <MDBBreadcrumbItem>Library</MDBBreadcrumbItem>
      <MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
    </MDBBreadcrumb>
  </div>

</MDBContainer>

 
Breadcrumbs with icons
   
  
 
 
<script>

  import {MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer} from "mdbsvelte";
</script>
<style>
  :global(.light-font .breadcrumb-item + .breadcrumb-item::before, .light-font a,.light-font i  ) {
    color: #fff;
  }

  :global(.light-font .breadcrumb-item.active) {
    color: #cfd8dc;
  }


</style>
<MDBContainer>
  <div class="light-font">
    <MDBBreadcrumb color="pink lighten-4">
      <MDBBreadcrumbItem iconRegular icon="star">Home</MDBBreadcrumbItem>
    </MDBBreadcrumb>

    <MDBBreadcrumb color="pink lighten-3">
      <MDBBreadcrumbItem iconRegular icon="star">Home</MDBBreadcrumbItem>
      <MDBBreadcrumbItem iconRegular icon="star" active>Library</MDBBreadcrumbItem>
    </MDBBreadcrumb>

    <MDBBreadcrumb color="pink lighten-2">
      <MDBBreadcrumbItem iconRegular icon="star">Home</MDBBreadcrumbItem>
      <MDBBreadcrumbItem iconRegular icon="star">Library</MDBBreadcrumbItem>
      <MDBBreadcrumbItem iconRegular icon="star" active>Data</MDBBreadcrumbItem>
    </MDBBreadcrumb>
  </div>

</MDBContainer>