Breadcrumb Components

Basic Breadcrumbs

Breadcrumbs provide navigation links that show the user's location in a website hierarchy. They help users understand where they are and provide easy navigation to higher levels.

Customized Breadcrumbs

Breadcrumbs can be customized with different classes to match your application's design.

Usage

<!-- Basic Breadcrumbs -->
<c-breadcrumbs.container>
  <c-breadcrumbs.home href="/"></c-breadcrumbs.home>
  <c-breadcrumbs.item href="/products">Products</c-breadcrumbs.item>
  <c-breadcrumbs.item current="true">Product Details</c-breadcrumbs.item>
</c-breadcrumbs.container>

<!-- With Custom Classes -->
<c-breadcrumbs.container class="bg-surface-variant">
  <c-breadcrumbs.home href="/"></c-breadcrumbs.home>
  <c-breadcrumbs.item href="/products">Products</c-breadcrumbs.item>
  <c-breadcrumbs.item current="true">Product Details</c-breadcrumbs.item>
</c-breadcrumbs.container>

<!-- With Django URL Template Tags -->
<c-breadcrumbs.container>
  <c-breadcrumbs.home href="{% url 'home' %}"></c-breadcrumbs.home>
  <c-breadcrumbs.item href="{% url 'category' slug=category.slug %}">{{ category.name }}</c-breadcrumbs.item>
  <c-breadcrumbs.item current="true">{{ object.title }}</c-breadcrumbs.item>
</c-breadcrumbs.container>

Attributes

Breadcrumbs Container

Attribute
Type
Default
Description
aria_label string "Breadcrumbs" Accessible label for screen readers
class string "" Additional CSS classes for the container

Breadcrumbs Item

Attribute
Type
Default
Description
href string "#" URL for the breadcrumb link
current string "false" When "true", indicates the current page (no link)

Breadcrumbs Home Item

Attribute
Type
Default
Description
href string "/" URL for the home link