https://stacks-design-system.netlify.app/assets/js/e88ebc65.72a3ed86.js

1/*! For license information please see e88ebc65.72a3ed86.js.LICENSE.txt */
2"use strict";(globalThis.webpackChunkmy_website=globalThis.webpackChunkmy_website||[]).push([[6307],{62589(e,r,s){s.r(r),s.d(r,{assets:()=>g,contentTitle:()=>f,default:()=>v,frontMatter:()=>B,metadata:()=>c,toc:()=>y});const c=JSON.parse('{"id":"components/breadcrumb","title":"Breadcrumb","description":"Displays the path to the current resource using a hierarchy of links.","source":"@site/docs/components/breadcrumb.mdx","sourceDirName":"components","slug":"/components/breadcrumb","permalink":"/docs/components/breadcrumb","draft":false,"unlisted":false,"editUrl":"https://github.com/stacks-network/stacks-design-system/tree/main/docs/components/breadcrumb.mdx","tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3,"title":"Breadcrumb","description":"Displays the path to the current resource using a hierarchy of links."},"sidebar":"docsSidebar","previous":{"title":"Badge","permalink":"/docs/components/badge"},"next":{"title":"Button","permalink":"/docs/components/button"}}');var a=s(74848),n=s(28453),d=s(96540),i=s(87677),t=s(54718),l=s(68100);const o=d.forwardRef(({...e},r)=>(0,a.jsx)("nav",{ref:r,"aria-label":"breadcrumb",...e}));o.displayName="Breadcrumb";const h=d.forwardRef(({className:e,...r},s)=>(0,a.jsx)("ol",{ref:s,className:(0,l.cn)("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 list-none m-0 p-0",e),...r}));h.displayName="BreadcrumbList";const m=d.forwardRef(({className:e,...r},s)=>(0,a.jsx)("li",{ref:s,className:(0,l.cn)("inline-flex items-center gap-1.5",e),...r}));m.displayName="BreadcrumbItem";const u=d.forwardRef(({className:e,...r},s)=>(0,a.jsx)("a",{ref:s,className:(0,l.cn)("transition-colors hover:text-foreground",e),...r}));u.displayName="BreadcrumbLink";const b=d.forwardRef(({className:e,...r},s)=>(0,a.jsx)("span",{ref:s,role:"link","aria-disabled":"true","aria-current":"page",className:(0,l.cn)("font-medium text-primary",e),...r}));b.displayName="BreadcrumbPage";const x=({children:e,className:r,...s})=>(0,a.jsx)("li",{role:"presentation","aria-hidden":"true",className:(0,l.cn)("[&>svg]:h-3.5 [&>svg]:w-3.5",r),...s,children:e??(0,a.jsx)(i.A,{})});x.displayName="BreadcrumbSeparator";const p=({className:e,...r})=>(0,a.jsxs)("span",{role:"presentation","aria-hidden":"true",className:(0,l.cn)("flex h-9 w-9 items-center justify-center",e),...r,children:[(0,a.jsx)(t.A,{className:"h-4 w-4"}),(0,a.jsx)("span",{className:"sr-only",children:"More"})]});p.displayName="BreadcrumbEllipsis";var j=s(20196);const B={sidebar_position:3,title:"Breadcrumb",description:"Displays the path to the current resource using a hierarchy of links."},f="Breadcrumb",g={},y=[{value:"With Ellipsis",id:"with-ellipsis",level:2},{value:"API Reference",id:"api-reference",level:2},{value:"Breadcrumb",id:"breadcrumb-1",level:3},{value:"BreadcrumbLink",id:"breadcrumblink",level:3},{value:"BreadcrumbPage",id:"breadcrumbpage",level:3},{value:"BreadcrumbSeparator",id:"breadcrumbseparator",level:3},{value:"BreadcrumbEllipsis",id:"breadcrumbellipsis",level:3},{value:"Accessibility",id:"accessibility",level:2}];function k(e){const r={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,n.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.header,{children:(0,a.jsx)(r.h1,{id:"breadcrumb",children:"Breadcrumb"})}),"\n",(0,a.jsx)(r.p,{children:"Displays the path to the current resource using a hierarchy of links."}),"\n",(0,a.jsx)(j.e,{children:(0,a.jsx)(o,{children:(0,a.jsxs)(h,{children:[(0,a.jsx)(m,{children:(0,a.jsx)(u,{href:"#",children:"Breadcrumb"})}),(0,a.jsx)(x,{}),(0,a.jsx)(m,{children:(0,a.jsx)(u,{href:"#",children:"Breadcrumb"})}),(0,a.jsx)(x,{}),(0,a.jsx)(m,{children:(0,a.jsx)(b,{children:"Breadcrumb"})})]})})}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-tsx",children:'import {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from "@/components/ui/breadcrumb"\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="#">Breadcrumb</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href="#">Breadcrumb</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>

2\n</Breadcrumb>\n'})}),"\n",(0,a.jsx)(r.h2,{id:"with-ellipsis",children:"With Ellipsis"}),"\n",(0,a.jsxs)(r.p,{children:["Use ",(0,a.jsx)(r.code,{children:"BreadcrumbEllipsis"})," to indicate collapsed intermediate items."]}),"\n",(0,a.jsx)(j.e,{children:(0,a.jsx)(o,{children:(0,a.jsxs)(h,{children:[(0,a.jsx)(m,{children:(0,a.jsx)(u,{href:"#",children:"Home"})}),(0,a.jsx)(x,{}),(0,a.jsx)(m,{children:(0,a.jsx)(p,{})}),(0,a.jsx)(x,{}),(0,a.jsx)(m,{children:(0,a.jsx)(u,{href:"#",children:"Components"})}),(0,a.jsx)(x,{}),(0,a.jsx)(m,{children:(0,a.jsx)(b,{children:"Breadcrumb"})})]})})}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-tsx",children:'<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="#">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href="#">Components</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n'})}),"\n",(0,a.jsx)(r.h2,{id:"api-reference",children:"API Reference"}),"\n",(0,a.jsx)(r.h3,{id:"breadcrumb-1",children:"Breadcrumb"}),"\n",(0,a.jsxs)(r.table,{children:[(0,a.jsx)(r.thead,{children:(0,a.jsxs)(r.tr,{children:[(0,a.jsx)(r.th,{children:"Prop"}),(0,a.jsx)(r.th,{children:"Type"}),(0,a.jsx)(r.th,{children:"Default"}),(0,a.jsx)(r.th,{children:"Description"})]})}),(0,a.jsxs)(r.tbody,{children:[(0,a.jsxs)(r.tr,{children:[(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"separator"})}),(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"ReactNode"})}),(0,a.jsx)(r.td,{children:"\u2014"}),(0,a.jsx)(r.td,{children:"Custom separator element"})]}),(0,a.jsxs)(r.tr,{children:[(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"children"})}),(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"ReactNode"})}),(0,a.jsx)(r.td,{children:"\u2014"}),(0,a.jsx)(r.td,{children:"BreadcrumbList and its children"})]})]})]}),"\n",(0,a.jsx)(r.h3,{id:"breadcrumblink",children:"BreadcrumbLink"}),"\n",(0,a.jsxs)(r.table,{children:[(0,a.jsx)(r.thead,{children:(0,a.jsxs)(r.tr,{children:[(0,a.jsx)(r.th,{children:"Prop"}),(0,a.jsx)(r.th,{children:"Type"}),(0,a.jsx)(r.th,{children:"Default"}),(0,a.jsx)(r.th,{children:"Description"})]})}),(0,a.jsxs)(r.tbody,{children:[(0,a.jsxs)(r.tr,{children:[(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"href"})}),(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"string"})}),(0,a.jsx)(r.td,{children:"\u2014"}),(0,a.jsx)(r.td,{children:"The URL the breadcrumb links to"})]}),(0,a.jsxs)(r.tr,{children:[(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"asChild"})}),(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"boolean"})}),(0,a.jsx)(r.td,{children:(0,a.jsx)(r.code,{children:"false"})}),(0,a.jsx)(r.td,{children:"Render as child element instead of anchor"})]})]})]}),"\n",(0,a.jsx)(r.h3,{id:"breadcrumbpage",children:"BreadcrumbPage"}),"\n",(0,a.jsxs)(r.p,{children:["Renders the current page label. Styled with primary color and ",(0,a.jsx)(r.code,{children:'aria-current="page"'}),"."]}),"\n",(0,a.jsx)(r.h3,{id:"breadcrumbseparator",children:"BreadcrumbSeparator"}),"\n",(0,a.jsxs)(r.p,{children:["Renders a separator between breadcrumb items. Defaults to a ",(0,a.jsx)(r.code,{children:"ChevronRight"})," icon. Pass children to customize."]}),"\n",(0,a.jsx)(r.h3,{id:"breadcrumbellipsis",children:"BreadcrumbEllipsis"}),"\n",(0,a.jsxs)(r.p,{children:["Renders a ",(0,a.jsx)(r.code,{children:"MoreHorizontal"})," icon to indicate collapsed items."]}),"\n",(0,a.jsx)(r.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,a.jsx)(r.p,{children:"The Breadcrumb component follows WAI-ARIA breadcrumb patterns:"}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:["Uses ",(0,a.jsx)(r.code,{children:"<nav>"})," with ",(0,a.jsx)(r.code,{children:'aria-label="breadcrumb"'})," for landmark navigation"]}),"\n",(0,a.jsxs)(r.li,{children:["Current page is marked with ",(0,a.jsx)(r.code,{children:'aria-current="page"'})," and ",(0,a.jsx)(r.code,{children:'aria-disabled="true"'})]}),"\n",(0,a.jsxs)(r.li,{children:["Separators are hidden from assistive technology with ",(0,a.jsx)(r.code,{children:'aria-hidden="true"'})]}),"\n",(0,a.jsxs)(r.li,{children:["Uses an ordered list (",(0,a.jsx)(r.code,{children:"<ol>"}),") to convey hierarchy to screen readers"]}),"\n"]})]})}function v(e={}){const{wrapper:r}={...(0,n.R)(),...e.components};return r?(0,a.jsx)(r,{...e,children:(0,a.jsx)(k,{...e})}):k(e)}},55480(e,r,s){s.d(r,{A:()=>i});var c=s(96540),a={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};const n=e=>{for(const r in e)if(r.startsWith("aria-")||"role"===r||"title"===r)return!0;return!1};var d=s(43795);const i=(0,c.forwardRef)(({color:e="currentColor",size:r=24,strokeWidth:s=2,absoluteStrokeWidth:i,className:t="",children:l,iconNode:o,...h},m)=>(0,c.createElement)("svg",{ref:m,...a,width:r,height:r,stroke:e,strokeWidth:i?24*Number(s)/Number(r):s,className:(0,d.z)("lucide",t),...!l&&!n(h)&&{"aria-hidden":"true"},...h},[...o.map(([e,r])=>(0,c.createElement)(e,r)),...Array.isArray(l)?l:[l]]))},2681(e,r,s){s.d(r,{A:()=>i});var c=s(96540),a=s(43795);const n=e=>{const r=(e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,r,s)=>s?s.toUpperCase():r.toLowerCase()))(e);return r.charAt(0).toUpperCase()+r.slice(1)};var d=s(55480);const i=(e,r)=>{const s=(0,c.forwardRef)(({className:s,...i},t)=>{return(0,c.createElement)(d.A,{ref:t,iconNode:r,className:(0,a.z)(`lucide-${l=n(e),l.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`,`lucide-${e}`,s),...i});var l});return s.displayName=n(e),s}},87677(e,r,s){s.d(r,{A:()=>c});const c=(0,s(2681).A)("chevron-right",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]])},54718(e,r,s){s.d(r,{A:()=>c});const c=(0,s(2681).A)("ellipsis",[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}]])},43795(e,r,s){s.d(r,{z:()=>c});const c=(...e)=>e.filter((e,r,s)=>Boolean(e)&&""!==e.trim()&&s.indexOf(e)===r).join(" ").trim()}}]);