Nav Group — Component Storybook

LIVE PREVIEW 2

nav_group(label=url, label=url)

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 — REQUIRED 1

Name	Type	Default
`label`	`str`	—

PROPS — OPTIONAL 7

Name	Type	Default
`items`	`list`	—
`icon`	`Optional[str]`	—
`expanded`	`bool`	True
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_label`	`str`	—
`slot_items`	`str`	—

AVAILABLE SLOTS 2

slot_label slot_items

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

nav_group.html

<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 icon %}<span class="{{ css_prefix }}nav-group-icon">{{ icon }}</span>{% endif %}
        {% if slot_label %}{{ slot_label|safe }}{% else %}{{ label }}{% endif %}
    </summary>
    <div class="{{ css_prefix }}sidebar-menu">
        {% if slot_items %}
            {{ slot_items|safe }}
        {% else %}
            {% for item in items %}
            <a href="{{ item.url }}" class="{{ css_prefix }}sidebar-item">
                {% 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>