Sidebar Nav — Component Storybook

LIVE PREVIEW 1

sidebar_nav(sections=[{'title': 'Main', 'items': [{'label': 'Dashboard', 'url': '/dash/'}, {'label': 'Analytics', 'url': '/analytics/'}]}, {'title': 'Settings', 'items': [{'label': 'Profile', 'url': '/profile/'}, {'label': 'Billing', 'url': '/billing/'}]}])

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — OPTIONAL 6

Name	Type	Default
`sections`	`list`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_header`	`str`	—
`slot_sections`	`str`	—
`slot_footer`	`str`	—

ACCESSIBILITY 2

Requirement	Element	Attribute	Value
Sidebar nav must have role=navigation	`nav`	`role`	navigation
Sidebar nav must have aria-label=Sidebar	`nav`	`aria-label`	Sidebar

AVAILABLE SLOTS 3

slot_header slot_sections slot_footer

CSS VARIABLES 24

--accent --background --border --color-primary --color-text --color-text-muted --color-text-secondary --duration-fast --ease-out --font-bold --font-semibold --popover --primary --radius-2xl --radius-full --radius-lg --shadow-sm --sidebar-width --space-2 --space-3 --space-4 --space-5 --space-6 --text-sm

TEMPLATE SOURCE

sidebar_nav.html

<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>