Skip to main content

Breadcrumbs

The <Breadcrumbs/> component render breadcrumbs that show the user where they are in the site's hierarchy.

Source@matro-ui/breadcrumbs

Import​

import { Breadcrumbs, BreadcrumbsItem } from "matro-ui";
  • Breadcrumbs: The wrapper that provides context and logic to the components
  • BreadcrumbsItem: The Breadcrumbs item

Usage​

Loading...
Live Editor
<Breadcrumbs divider="🚀">
   <BreadcrumbsItem>
     <Link to="#">Home</Link>
   </BreadcrumbsItem>

   <BreadcrumbsItem>
     <Link to="#">Products</Link>
   </BreadcrumbsItem>

   <BreadcrumbsItem>
     <Link to="#">Course 1</Link>
   </BreadcrumbsItem>
</Breadcrumbs>

Show last Divider​

By default, <Breadcrumbs/> last divider is hidden. To change this behaviour, simply add showLastDivider prop:

Loading...
Live Editor
<Breadcrumbs divider="👉" showLastDivider>
 {["Link1", "Link2", "Link3"].map(link => 
   <BreadcrumbsItem key={uuid()}>
     <Link to={`/${link}`}>{link}</Link>
   </BreadcrumbsItem>
 )}
</Breadcrumbs>

Last Active​

By default, <Breadcrumbs/> last item is inactive. To change this behaviour, simply add lastActive prop:

Loading...
Live Editor
<Breadcrumbs lastActive>
   <BreadcrumbsItem>
     <Link to="#">Link 1</Link>
   </BreadcrumbsItem>

   <BreadcrumbsItem>
     <Link to="#">Link 2</Link>
   </BreadcrumbsItem>
</Breadcrumbs>

Custom Divider​

<Breadcrumbs/> default divider is "/". To change it set divider prop (val: any):

Loading...
Live Editor
//  import { IoIosArrowForward } from "react-icons/io";

<Breadcrumbs divider={<IoIosArrowForward />}>
 {["Link1", "Link2", "Link3"].map(link => 
   <BreadcrumbsItem key={uuid()}>
     <Link to={`/${link}`}>{link}</Link>
   </BreadcrumbsItem>
 )}
</Breadcrumbs>