Breadcrumb
Breadcrumb navigation component.
Preview
Usage
views.py
python
from djust import LiveView
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.items = [{'label': 'Home', 'url': '#'}, {'label': 'Products', 'url': '#products'}, {'label': 'Current Page', 'url': ''}]my_template.html
django
{% load theme_components %}
{% theme_breadcrumb items=items separator='/' %}Props
| Name | Type | Required | Default |
|---|---|---|---|
| items | list | required | — |
| separator | str | / | |
| css_prefix | str | — | |
| attrs | dict | — | |
| slot_separator | str | — |
Accessibility
| Requirement | Element | Attribute | Value |
|---|---|---|---|
| Breadcrumb nav must have aria-label=Breadcrumb | nav | aria-label | Breadcrumb |
Slots
slot_separator
Source & styles
| File | Path | Notes |
|---|---|---|
| template | djust_theming/components/breadcrumb.html | Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/. |
| css | djust_theming/components.css | Defines 6 of this component's classes at line 715, 720, 730, 736, 747, 753. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
| css | djust_components/components.css | Defines 4 of this component's classes at line 524, 525, 526, 528. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
| css | djust_theming/catalogue.css | Defines 1 of this component's classes at line 106. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
CSS variables
--foreground --muted-foreground --primary
Template source — breadcrumb.html
django
<nav class="{{ css_prefix }}breadcrumb {% if attrs.class %}{{ attrs.class }}{% endif %}"
aria-label="Breadcrumb"
{% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
<ol class="{{ css_prefix }}breadcrumb-list">
{% for item in items %}
<li class="{{ css_prefix }}breadcrumb-item">
{% if not forloop.last %}
<a href="{{ item.url }}" class="{{ css_prefix }}breadcrumb-link"{% if item.navigate and item.url %} dj-navigate="{{ item.url }}"{% endif %}>{{ item.label }}</a>
{% if slot_separator %}
<span class="{{ css_prefix }}breadcrumb-separator" aria-hidden="true">{{ slot_separator|safe }}</span>
{% else %}
<span class="{{ css_prefix }}breadcrumb-separator" aria-hidden="true">{{ separator }}</span>
{% endif %}
{% else %}
<span class="{{ css_prefix }}breadcrumb-current" aria-current="page">{{ item.label }}</span>
{% endif %}
</li>
{% endfor %}
</ol>
</nav>