Nav — Component Storybook

LIVE PREVIEW 1

nav(label=url, 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 — OPTIONAL 7

Name	Type	Default
`brand`	`Optional[str]`	—
`items`	`list`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_brand`	`str`	—
`slot_items`	`str`	—
`slot_actions`	`str`	—

ACCESSIBILITY 2

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

AVAILABLE SLOTS 3

slot_brand slot_items slot_actions

CSS VARIABLES 15

--accent --background --border --color-primary --color-primary-glow --content-max-width --font-bold --navbar-height --radius-lg --shadow-sm --space-2 --space-3 --space-6 --space-8 --text-lg

TEMPLATE SOURCE

nav.html

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