{"name":"breadcrumb","title":"Breadcrumb","description":"Displays the path to the current resource using a hierarchy of links.","installCommand":"bunx marko-ui add breadcrumb -y","usageTags":"<Breadcrumb>, <BreadcrumbItem>, <BreadcrumbLink>, <BreadcrumbPage>, <BreadcrumbSeparator>","importSnippet":"import Breadcrumb from \"@/components/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbItem from \"@/components/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@/components/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@/components/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@/components/ui/breadcrumb/separator.marko\";","usageSnippet":"<Breadcrumb>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","tags":["Breadcrumb","BreadcrumbEllipsis","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":["The root `<nav>` carries `aria-label=\"breadcrumb\"` so assistive technology announces the trail as a landmark distinct from other navigation.","`BreadcrumbPage` renders `aria-current=\"page\"` and `aria-disabled=\"true\"` on a non-interactive `<span>`, marking the current location without an actionable (and redundant) link.","`BreadcrumbSeparator` and `BreadcrumbEllipsis` are `role=\"presentation\"` with `aria-hidden=\"true\"` — they are visual only and never reachable by keyboard or screen reader."],"examples":[{"id":"breadcrumb-demo","title":"Demo","source":"import Breadcrumb from \"@marko-ui/shadcn/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbEllipsis from \"@marko-ui/shadcn/ui/breadcrumb/ellipsis.marko\";\nimport BreadcrumbItem from \"@marko-ui/shadcn/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@marko-ui/shadcn/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@marko-ui/shadcn/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@marko-ui/shadcn/ui/breadcrumb/separator.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport DropdownMenu from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const ITEMS = [\n  { value: \"documentation\", label: \"Documentation\" },\n  { value: \"themes\", label: \"Themes\" },\n  { value: \"github\", label: \"GitHub\" },\n];\n\n<Breadcrumb>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <DropdownMenu items=ITEMS>\n      <@trigger|triggerProps|>\n        <Button type=\"button\" ...triggerProps variant=\"ghost\" size=\"icon-sm\">\n          <BreadcrumbEllipsis/>\n          <span class=\"sr-only\">Toggle menu</span>\n        </Button>\n      </@trigger>\n    </DropdownMenu>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","description":"A breadcrumb combining a link, a dropdown-collapsed section, and the current page."},{"id":"breadcrumb-basic","title":"Basic","source":"import Breadcrumb from \"@marko-ui/shadcn/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbItem from \"@marko-ui/shadcn/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@marko-ui/shadcn/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@marko-ui/shadcn/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@marko-ui/shadcn/ui/breadcrumb/separator.marko\";\n\n<Breadcrumb>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","description":"A basic breadcrumb with a home link and a components link."},{"id":"breadcrumb-separator","title":"Custom separator","source":"import Breadcrumb from \"@marko-ui/shadcn/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbItem from \"@marko-ui/shadcn/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@marko-ui/shadcn/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@marko-ui/shadcn/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@marko-ui/shadcn/ui/breadcrumb/separator.marko\";\n\n<Breadcrumb>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator>\n    <span>&rsaquo;</span>\n  </BreadcrumbSeparator>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/docs\">Docs</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator>\n    <span>&rsaquo;</span>\n  </BreadcrumbSeparator>\n  <BreadcrumbItem>\n    <BreadcrumbPage>Installation</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","description":"Pass children to `BreadcrumbSeparator` to replace the default `/` with a custom separator."},{"id":"breadcrumb-dropdown","title":"Dropdown","source":"import Breadcrumb from \"@marko-ui/shadcn/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbItem from \"@marko-ui/shadcn/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@marko-ui/shadcn/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@marko-ui/shadcn/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@marko-ui/shadcn/ui/breadcrumb/separator.marko\";\nimport DropdownMenu from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\nstatic const ITEMS = [\n  { value: \"documentation\", label: \"Documentation\" },\n  { value: \"themes\", label: \"Themes\" },\n  { value: \"github\", label: \"GitHub\" },\n];\n\n<Breadcrumb>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator>\n    <Icon name=\"Circle\" class=\"size-3.5 fill-current\"/>\n  </BreadcrumbSeparator>\n  <BreadcrumbItem>\n    <DropdownMenu items=ITEMS>\n      <@trigger|triggerProps|>\n        <button type=\"button\" ...triggerProps class=\"flex items-center gap-1\">\n          Components\n          <Icon name=\"ChevronDown\" class=\"size-3.5\"/>\n        </button>\n      </@trigger>\n    </DropdownMenu>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator>\n    <Icon name=\"Circle\" class=\"size-3.5 fill-current\"/>\n  </BreadcrumbSeparator>\n  <BreadcrumbItem>\n    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","description":"Compose `BreadcrumbItem` with `DropdownMenu` to create a dropdown in the breadcrumb."},{"id":"breadcrumb-ellipsis","title":"Collapsed","source":"import Breadcrumb from \"@marko-ui/shadcn/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbEllipsis from \"@marko-ui/shadcn/ui/breadcrumb/ellipsis.marko\";\nimport BreadcrumbItem from \"@marko-ui/shadcn/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@marko-ui/shadcn/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@marko-ui/shadcn/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@marko-ui/shadcn/ui/breadcrumb/separator.marko\";\n\n<Breadcrumb>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbEllipsis/>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","description":"Use `BreadcrumbEllipsis` to show a collapsed state when the path is too long."},{"id":"breadcrumb-link","title":"Link component","source":"import Breadcrumb from \"@marko-ui/shadcn/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbItem from \"@marko-ui/shadcn/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@marko-ui/shadcn/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@marko-ui/shadcn/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@marko-ui/shadcn/ui/breadcrumb/separator.marko\";\n\n<Breadcrumb>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"#link-component\">Home</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"#link-component\">Components</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem>\n    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","description":"Our `BreadcrumbLink` always renders a real `<a href>` — there is no `render`-prop indirection to swap in a routing library's Link component."},{"id":"breadcrumb-rtl","title":"RTL","source":"import Breadcrumb from \"@marko-ui/shadcn/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbItem from \"@marko-ui/shadcn/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@marko-ui/shadcn/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@marko-ui/shadcn/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@marko-ui/shadcn/ui/breadcrumb/separator.marko\";\nimport DropdownMenu from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\nstatic const ITEMS = [\n  { value: \"documentation\", label: \"التوثيق\" },\n  { value: \"themes\", label: \"السمات\" },\n  { value: \"github\", label: \"جيت هاب\" },\n];\n\n<Breadcrumb dir=\"rtl\">\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/\">الرئيسية</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator>\n    <Icon name=\"Circle\" class=\"size-3.5 fill-current\"/>\n  </BreadcrumbSeparator>\n  <BreadcrumbItem>\n    <DropdownMenu items=ITEMS>\n      <@trigger|triggerProps|>\n        <button type=\"button\" ...triggerProps class=\"flex items-center gap-1\" dir=\"rtl\">\n          المكونات\n          <Icon name=\"ChevronDown\" class=\"size-3.5\"/>\n        </button>\n      </@trigger>\n    </DropdownMenu>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator>\n    <Icon name=\"Circle\" class=\"size-3.5 fill-current\"/>\n  </BreadcrumbSeparator>\n  <BreadcrumbItem>\n    <BreadcrumbPage>مسار التنقل</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","description":"Breadcrumb restyles correctly under `dir=\"rtl\"` with no component changes."},{"id":"breadcrumb-responsive","title":"Responsive","source":"import Breadcrumb from \"@marko-ui/shadcn/ui/breadcrumb/breadcrumb.marko\";\nimport BreadcrumbEllipsis from \"@marko-ui/shadcn/ui/breadcrumb/ellipsis.marko\";\nimport BreadcrumbItem from \"@marko-ui/shadcn/ui/breadcrumb/item.marko\";\nimport BreadcrumbLink from \"@marko-ui/shadcn/ui/breadcrumb/link.marko\";\nimport BreadcrumbPage from \"@marko-ui/shadcn/ui/breadcrumb/page.marko\";\nimport BreadcrumbSeparator from \"@marko-ui/shadcn/ui/breadcrumb/separator.marko\";\n\n<Breadcrumb>\n  <BreadcrumbItem>\n    <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator/>\n  <BreadcrumbItem class=\"hidden md:block\">\n    <BreadcrumbLink href=\"/docs\">Docs</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator class=\"hidden md:block\"/>\n  <BreadcrumbItem class=\"md:hidden\">\n    <BreadcrumbEllipsis/>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator class=\"md:hidden\"/>\n  <BreadcrumbItem class=\"hidden md:block\">\n    <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n  </BreadcrumbItem>\n  <BreadcrumbSeparator class=\"hidden md:block\"/>\n  <BreadcrumbItem>\n    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n  </BreadcrumbItem>\n</Breadcrumb>","description":"Hide middle items below the `md` breakpoint and swap in `BreadcrumbEllipsis` with Tailwind's responsive classes."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"nav","subcomponents":[{"name":"ellipsis","props":[],"nativeAttributes":"span"},{"name":"item","props":[],"nativeAttributes":"li"},{"name":"link","props":[],"nativeAttributes":"a"},{"name":"page","props":[],"nativeAttributes":"span"},{"name":"separator","props":[],"nativeAttributes":"li"}]}