Breadcrumb

The breadcrumb component is great for indicating the current page's location within a navigational hierarchy.

Basic Example

Breadcrumbs can be composed using both the BreadCrumb and BreadcrumbItem components.

import React from "react";
import { Breadcrumb, BreadcrumbItem } from "shards-react";

export default function BadgesExamples() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <a href="#">Home</a>
      </BreadcrumbItem>
      <BreadcrumbItem active>Library</BreadcrumbItem>
    </Breadcrumb>
  );
}

Props

The following props are available for the Breadcrumb component.

Prop	Description	Type	Default	Required
listClassName	The breadcrumb list class name.	`String`	-	No
className	The class name.	`String`	-	No
aria-label	The aria label value.	`String`	`"breadcrumb"`	No
children	The children nodes.	`Node`	-	No
tag	The component tag name.	`FuncString`	`"nav"`	No
listTag	The breadcrumb list tag.	`FuncString`	`"ol"`	No

Subcomponents

The following subcomponents are available for the Breadcrumb component.

<BreadcrumbItem/>

Prop	Description	Type	Default	Required
active	Whether it is active, or not.	`Bool`	-	No
className	The class name.	`String`	-	No
tag	The component tag.	`FuncString`	`"li"`	No