Nav Item — Component Storybook

LIVE PREVIEW 3

nav_item(label=Home, url=/, active=True)

nav_item(label=About, url=/about/, active=False)

nav_item(label=Inbox, url=/inbox/, badge=5)

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 2

Name	Type	Default
`label`	`str`	—
`url`	`str`	—

PROPS — OPTIONAL 7

Name	Type	Default
`icon`	`Optional[str]`	—
`active`	`Optional[bool]`	—
`badge`	`Optional[str]`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_icon`	`str`	—
`slot_badge`	`str`	—

ACCESSIBILITY 1

Requirement	Element	Attribute	Value
Active nav item must have aria-current=page	`a`	`aria-current`	page

AVAILABLE SLOTS 2

slot_icon slot_badge

CSS VARIABLES 12

--accent --color-primary --color-text --color-text-secondary --duration-fast --ease-out --font-medium --primary --radius-md --space-2 --space-4 --text-sm

TEMPLATE SOURCE

nav_item.html

<a href="{{ url }}"
   class="{{ css_prefix }}nav-link{% if is_active %} active{% endif %} {% if attrs.class %}{{ attrs.class }}{% endif %}"
   {% if is_active %}aria-current="page"{% endif %}
   {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    {% if slot_icon %}{{ slot_icon|safe }}{% elif icon %}<span class="{{ css_prefix }}nav-link-icon">{{ icon }}</span>{% endif %}
    <span class="{{ css_prefix }}nav-link-label">{{ label }}</span>
    {% if slot_badge %}{{ slot_badge|safe }}{% elif badge %}<span class="{{ css_prefix }}nav-link-badge">{{ badge }}</span>{% endif %}
</a>