Nav

template 0 required7 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.items = [{'label': 'Home', 'url': '#'}, {'label': 'Docs', 'url': '#docs'}, {'label': 'Gallery', 'url': '#gallery'}]
my_template.html
django
{% load theme_components %}
{% theme_nav brand='MyApp' items=items %}

Props

NameTypeRequiredDefault
brandOptional[str]—
itemslist—
css_prefixstr—
attrsdict—
slot_brandstr—
slot_itemsstr—
slot_actionsstr—

Accessibility

RequirementElementAttributeValue
Nav must have role=navigationnavrolenavigation
Nav must have aria-labelnavaria-labelMain

Slots

slot_brand slot_items slot_actions
Source & styles
FilePathNotes
templatedjust_theming/components/nav.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/catalogue.cssDefines 5 of this component's classes at line 38, 39, 40, 41, 42. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/scaffold.cssDefines 5 of this component's classes at line 63, 80, 98, 119, 132. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/print.cssDefines 2 of this component's classes at line 13, 14. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/performance.cssDefines 1 of this component's classes at line 209. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
Template source — nav.html
django
<nav class="{{ css_prefix }}navbar {% if attrs.class %}{{ attrs.class }}{% endif %}"
     role="navigation"
     aria-label="Main"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    <div class="{{ css_prefix }}navbar-inner">
        {% if slot_brand %}
        <div class="{{ css_prefix }}navbar-brand">{{ slot_brand|safe }}</div>
        {% elif brand %}
        <div class="{{ css_prefix }}navbar-brand">{{ brand }}</div>
        {% endif %}

        <div class="{{ css_prefix }}navbar-nav">
            {% if slot_items %}
                {{ slot_items|safe }}
            {% else %}
                {% for item in items %}
                <a href="{{ item.url }}" class="{{ css_prefix }}nav-link{% if item.active %} active{% endif %}"
                   {% if item.active %}aria-current="page"{% endif %}>
                    {% if item.icon %}<span class="{{ css_prefix }}nav-link-icon">{{ item.icon }}</span>{% endif %}
                    {{ item.label }}
                    {% if item.badge %}<span class="{{ css_prefix }}nav-link-badge">{{ item.badge }}</span>{% endif %}
                </a>
                {% endfor %}
            {% endif %}
        </div>

        {% if slot_actions %}
        <div class="{{ css_prefix }}navbar-actions">{{ slot_actions|safe }}</div>
        {% endif %}
    </div>
</nav>