Nav Group
Preview
python
nav_group(label='Admin', items=[{'label': 'Users', 'url': '#admin-users'}, {'label': 'Settings', 'url': '#admin-settings'}], expanded=True)Usage
views.py
python
from djust import LiveView
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.items = [{'label': 'Users', 'url': '#admin-users'}, {'label': 'Settings', 'url': '#admin-settings'}]my_template.html
django
{% load theme_components %}
{% theme_nav_group label='Admin' items=items expanded=True %}Props
| Name | Type | Required | Default |
|---|---|---|---|
| label | str | required | — |
| items | list | — | |
| icon | Optional[str] | — | |
| expanded | bool | True | |
| css_prefix | str | — | |
| attrs | dict | — | |
| slot_label | str | — | |
| slot_items | str | — |
Slots
slot_label slot_items
Source & styles
| File | Path | Notes |
|---|---|---|
| template | djust_theming/components/nav_group.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 3 of this component's classes at line 73, 83, 84. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
| css | djust_theming/scaffold.css | Defines 3 of this component's classes at line 176, 189, 195. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
Template source — nav_group.html
django
<details class="{{ css_prefix }}nav-group {% if attrs.class %}{{ attrs.class }}{% endif %}"
{% if expanded %}open=""{% endif %}
{% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
<summary class="{{ css_prefix }}sidebar-title"{% if toggle_event %} dj-click="{{ toggle_event }}" data-value="{{ label }}"{% endif %}>
{% if icon %}<span class="{{ css_prefix }}nav-group-icon">{{ icon }}</span>{% endif %}
{% if slot_label %}{{ slot_label|safe }}{% else %}{{ label }}{% endif %}
{% if badge %}<span class="{{ css_prefix }}nav-group-badge">{{ badge }}</span>{% endif %}
</summary>
<div class="{{ css_prefix }}sidebar-menu">
{% if slot_items %}
{{ slot_items|safe }}
{% else %}
{% for item in items %}
{% comment %}
`navigate` is opt-in per item: a link the app knows points at a
LiveView route carries dj-navigate so a plain left click goes over
the open socket instead of reloading the document. The href is
what makes the rest still work — copy-link, crawlers, and the
modified clicks (Cmd, Ctrl, Shift, Alt, middle button) that
dj-navigate deliberately does not intercept.
{% endcomment %}
<a href="{{ item.url }}" class="{{ css_prefix }}sidebar-item{% if item.active %} active{% endif %}"{% if item.active %} aria-current="page"{% endif %}{% if item.navigate and item.url %} dj-navigate="{{ item.url }}"{% endif %}>
{% if item.icon %}<span class="{{ css_prefix }}nav-item-icon">{{ item.icon }}</span>{% endif %}
{{ item.label }}
{% if item.badge %}<span class="{{ css_prefix }}sidebar-item-count">{{ item.badge }}</span>{% endif %}
</a>
{% endfor %}
{% endif %}
</div>
</details>