Nav Item
Usage
views.py
python
from djust import LiveView
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.label = 'Home'my_template.html
django
{% load theme_components %}
{% theme_nav_item label=label url='#' active=True %}Props
| Name | Type | Required | Default |
|---|---|---|---|
| label | str | required | — |
| url | str | required | — |
| icon | Optional[str] | — | |
| active | Optional[bool] | — | |
| badge | Optional[str] | — | |
| css_prefix | str | — | |
| attrs | dict | — | |
| slot_icon | str | — | |
| slot_badge | str | — |
Accessibility
| Requirement | Element | Attribute | Value |
|---|---|---|---|
| Active nav item must have aria-current=page | a | aria-current | page |
Slots
slot_icon slot_badge
Source & styles
| File | Path | Notes |
|---|---|---|
| template | djust_theming/components/nav_item.html | Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/. |
| css | djust_theming/catalogue.css | Defines 2 of this component's classes at line 42, 44. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
| css | djust_theming/scaffold.css | Defines 2 of this component's classes at line 132, 147. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
| css | djust_theming/components.css | Defines 1 of this component's classes at line 342. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
| css | djust_components/components.css | Defines 1 of this component's classes at line 245. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
Template source — nav_item.html
django
<a href="{{ url }}"
class="{{ css_prefix }}nav-link{% if is_active %} active{% endif %} {% if attrs.class %}{{ attrs.class }}{% endif %}"
{% if is_active %}aria-current="page"{% endif %}
{% if attrs.id %}id="{{ attrs.id }}"{% endif %}
{% if attrs.navigate and url %}dj-navigate="{{ url }}"{% endif %}>
{% if slot_icon %}{{ slot_icon|safe }}{% elif icon %}<span class="{{ css_prefix }}nav-link-icon">{{ icon }}</span>{% endif %}
<span class="{{ css_prefix }}nav-link-label">{{ label }}</span>
{% if slot_badge %}{{ slot_badge|safe }}{% elif badge %}<span class="{{ css_prefix }}nav-link-badge">{{ badge }}</span>{% endif %}
</a>