var Component=(()=>{var b=Object.create;var t=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var s=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var p=(n,r)=>()=>(r||n((r={exports:{}}).exports,r),r.exports),k=(n,r)=>{for(var a in r)t(n,a,{get:r[a],enumerable:!0})},i=(n,r,a,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let c of h(r))!l.call(n,c)&&c!==a&&t(n,c,{get:()=>r[c],enumerable:!(d=B(r,c))||d.enumerable});return n};var L=(n,r,a)=>(a=n!=null?b(s(n)):{},i(r||!n||!n.__esModule?t(a,"default",{value:n,enumerable:!0}):a,n)),g=n=>i(t({},"__esModule",{value:!0}),n);var u=p((R,m)=>{m.exports=_jsx_runtime});var C={};k(C,{default:()=>x,frontmatter:()=>I});var e=L(u()),I={id:"breadcrumb",category:"navigation",title:"Breadcrumb",package:"@chakra-ui/react",description:"Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website."};function o(n){let r=Object.assign({h2:"h2",pre:"pre",code:"code",h3:"h3",p:"p",ul:"ul",li:"li"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{id:"import",children:"Import"}),` `,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:"language-js",children:`import { Breadcrumb } from '@chakra-ui/react' `})}),` `,(0,e.jsx)(r.h2,{id:"usage",children:"Usage"}),` `,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:"language-jsx",children:` Home Docs Breadcrumb `})}),` `,(0,e.jsx)(r.h3,{id:"changing-the-separator",children:"Changing the separator"}),` `,(0,e.jsxs)(r.p,{children:["Render a custom children into the ",(0,e.jsx)(r.code,{children:"Breadcrumb.Separator"}),` component to change the separator. You can set to to a string like "-" or an icon.`]}),` `,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:"language-jsx",children:` Home - About - Contact `})}),` `,(0,e.jsx)(r.p,{children:"Here's an example using an icon as a separator:"}),` `,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:"language-jsx",children:` Home About Contact `})}),` `,(0,e.jsx)(r.h2,{id:"usage-with-routing-library",children:"Usage with Routing Library"}),` `,(0,e.jsxs)(r.p,{children:[`To use the Breadcrumb with a routing Library like Next.js Router or React Router, all you need to do is to pass the `,(0,e.jsx)(r.code,{children:"asChild"}),` prop to the `,(0,e.jsx)(r.code,{children:"Breadcrumb.Link"})," component."]}),` `,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:"language-jsx",live:"false",children:`// import Link from "next/link" Home About Contact `})}),` `,(0,e.jsx)(r.h2,{id:"accessibility",children:"Accessibility"}),` `,(0,e.jsxs)(r.ul,{children:[` `,(0,e.jsxs)(r.li,{children:["The breadcrumb is rendered in a ",(0,e.jsx)(r.code,{children:"nav"}),` to denote that it is a navigation landmark, with a label of `,(0,e.jsx)(r.code,{children:"breadcrumb"}),"."]}),` `,(0,e.jsxs)(r.li,{children:["The current link has the ",(0,e.jsx)(r.code,{children:"aria-current=page"})," and ",(0,e.jsx)(r.code,{children:"role=link"})]}),` `]})]})}function f(n={}){let{wrapper:r}=n.components||{};return r?(0,e.jsx)(r,Object.assign({},n,{children:(0,e.jsx)(o,n)})):o(n)}var x=f;return g(C);})(); ;return Component;

Breadcrumb

Props#

Breadcrumb Props#

BreadcrumbItem Props#

BreadcrumbLink Props#

BreadcrumbSeparator Props#