Sidebar Nav

template 0 required6 optional3 slots2 a11y rules

ReferenceGuide

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.sections = [{'title': 'Main', 'items': [{'label': 'Dashboard', 'url': '#dash'}, {'label': 'Analytics', 'url': '#analytics'}]}, {'title': 'Settings', 'items': [{'label': 'Profile', 'url': '#profile'}, {'label': 'Billing', 'url': '#billing'}]}]
my_template.html
django
{% load theme_components %}
{% theme_sidebar_nav sections=sections %}

Props

NameTypeRequiredDefault
sectionslist—
css_prefixstr—
attrsdict—
slot_headerstr—
slot_sectionsstr—
slot_footerstr—

Accessibility

RequirementElementAttributeValue
Sidebar nav must have role=navigationnavrolenavigation
Sidebar nav must have aria-label=Sidebarnavaria-labelSidebar

Slots

slot_header slot_sections slot_footer
Source & styles
FilePathNotes
templatedjust_theming/components/sidebar_nav.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/scaffold.cssDefines 4 of this component's classes at line 162, 176, 189, 195. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/catalogue.cssDefines 2 of this component's classes at line 83, 84. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/print.cssDefines 1 of this component's classes at line 12. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
Template source — sidebar_nav.html
django
<nav class="{{ css_prefix }}sidebar {% if attrs.class %}{{ attrs.class }}{% endif %}"
     role="navigation"
     aria-label="Sidebar"
     data-theme-sidebar-collapse
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    {% if slot_header %}
    <div class="{{ css_prefix }}sidebar-header">{{ slot_header|safe }}</div>
    {% endif %}

    {% if slot_sections %}
        {{ slot_sections|safe }}
    {% else %}
        {% for section in sections %}
        <div class="{{ css_prefix }}sidebar-section">
            {% if section.title %}
            <h3 class="{{ css_prefix }}sidebar-title">{{ section.title }}</h3>
            {% endif %}
            <div class="{{ css_prefix }}sidebar-menu">
                {% for item in section.items %}
                <a href="{{ item.url }}" class="{{ css_prefix }}sidebar-item{% if item.active %} active{% endif %}"
                   {% if item.active %}aria-current="page"{% endif %}>
                    {% if item.icon %}<span class="{{ css_prefix }}sidebar-item-icon">{{ item.icon }}</span>{% endif %}
                    {{ item.label }}
                    {% if item.badge %}<span class="{{ css_prefix }}sidebar-item-count">{{ item.badge }}</span>{% endif %}
                </a>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    {% endif %}

    {% if slot_footer %}
    <div class="{{ css_prefix }}sidebar-footer">{{ slot_footer|safe }}</div>
    {% endif %}
</nav>