Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Breadcrumbs

<c-lb.breadcrumbs /> Markdown

Breadcrumbs component for Django: add accessible navigation trails to multi-level pages. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Breadcrumbs renders an accessible <nav> with a separator-joined trail of links. Pass each crumb as a c-lb.breadcrumbs.item with an href — the last item renders without a link to indicate the current page.

Basic Usage

<c-lb.breadcrumbs>
  <c-lb.breadcrumbs.item href="/">Home</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item href="/documents">Documents</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item>Add Document</c-lb.breadcrumbs.item>
</c-lb.breadcrumbs>

With Icons

<c-lb.breadcrumbs>
  <c-lb.breadcrumbs.item href="/" icon="rmx.home">Home</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item href="/documents" icon="rmx.folder">Documents</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item icon="rmx.file_text">Report.pdf</c-lb.breadcrumbs.item>
</c-lb.breadcrumbs>

Sizes

<div class="flex flex-col gap-4">
  <c-lb.breadcrumbs size="xs">
    <c-lb.breadcrumbs.item href="/">Home</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item href="/docs">Documents</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item>Current</c-lb.breadcrumbs.item>
  </c-lb.breadcrumbs>

  <c-lb.breadcrumbs size="sm">
    <c-lb.breadcrumbs.item href="/">Home</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item href="/docs">Documents</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item>Current</c-lb.breadcrumbs.item>
  </c-lb.breadcrumbs>

  <c-lb.breadcrumbs size="md">
    <c-lb.breadcrumbs.item href="/">Home</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item href="/docs">Documents</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item>Current</c-lb.breadcrumbs.item>
  </c-lb.breadcrumbs>

  <c-lb.breadcrumbs size="lg">
    <c-lb.breadcrumbs.item href="/">Home</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item href="/docs">Documents</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item>Current</c-lb.breadcrumbs.item>
  </c-lb.breadcrumbs>

  <c-lb.breadcrumbs size="xl">
    <c-lb.breadcrumbs.item href="/">Home</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item href="/docs">Documents</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item>Current</c-lb.breadcrumbs.item>
  </c-lb.breadcrumbs>
</div>

Icon Only

<c-lb.breadcrumbs>
  <c-lb.breadcrumbs.item href="/" icon="rmx.home" />
  <c-lb.breadcrumbs.item href="/settings" icon="rmx.settings" />
  <c-lb.breadcrumbs.item icon="rmx.user" />
</c-lb.breadcrumbs>

Max Width (Scrollable)

<div class="max-w-xs">
  <c-lb.breadcrumbs>
    <c-lb.breadcrumbs.item href="/">Home</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item href="/documents">Documents</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item href="/documents/reports">Reports</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item href="/documents/reports/2024">2024</c-lb.breadcrumbs.item>
    <c-lb.breadcrumbs.item>Annual Financial Report</c-lb.breadcrumbs.item>
  </c-lb.breadcrumbs>
</div>

Custom Styling

<c-lb.breadcrumbs class="p-4 bg-base-200/50 rounded-lg">
  <c-lb.breadcrumbs.item href="/" icon="rmx.home">Home</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item href="/products" icon="rmx.shopping_bag">Products</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item icon="rmx.shirt">T-Shirts</c-lb.breadcrumbs.item>
</c-lb.breadcrumbs>

Using Django View Names

Use viewname instead of href to link to Django views by name. Pass URL arguments with the l: prefix.

<c-lb.breadcrumbs>
  <c-lb.breadcrumbs.item viewname="home">Home</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item viewname="project_list">Projects</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item viewname="project_detail" l:pk="42">Project Alpha</c-lb.breadcrumbs.item>
  <c-lb.breadcrumbs.item>Settings</c-lb.breadcrumbs.item>
</c-lb.breadcrumbs>

API Reference

c-lb.breadcrumbs

Property Type Default Required Description
class string - No Additional CSS classes to apply
size
xs sm md lg xl
md No Breadcrumbs text size
Slot Name Description
default Breadcrumb items using breadcrumbs.item components

c-lb.breadcrumbs.item

Property Type Default Required Description
class string - No Additional CSS classes to apply
href string - No Link URL for the breadcrumb item (if not provided, item will be plain text)
viewname string - No Django view name to resolve (alternative to href). Use l: prefixed attributes for URL arguments
icon string - No Icon name to display
↳ .fill modifier - No Render in filled (solid) style
icon.class string - No Additional CSS classes for the icon
Slot Name Description
default Breadcrumb item content (text or custom content)
Prev Timeline
Next Dock