Dropdown — Component Storybook

LIVE PREVIEW 2

dropdown(id=gallery-dropdown-left, label=Dropdown (left), align=left)

dropdown(id=gallery-dropdown-right, label=Dropdown (right), align=right)

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
`id`	`str`	—
`label`	`str`	—

PROPS — OPTIONAL 5

Name	Type	Default
`align`	`str`	left
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_trigger`	`str`	—
`slot_menu`	`str`	—

ACCESSIBILITY 2

Requirement	Element	Attribute	Value
Trigger must have aria-haspopup=true	`button`	`aria-haspopup`	true
Trigger must have aria-expanded	`button`	`aria-expanded`	(present)

AVAILABLE SLOTS 2

slot_trigger slot_menu

CSS VARIABLES 8

--accent --accent-foreground --background --border --card --card-foreground --foreground --radius

TEMPLATE SOURCE

dropdown.html

<div class="{{ css_prefix }}dropdown {% if attrs.class %}{{ attrs.class }}{% endif %}"
     data-theme-dropdown="{{ id }}"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    {% if slot_trigger %}
    {{ slot_trigger|safe }}
    {% else %}
    <button class="{{ css_prefix }}dropdown-trigger"
            aria-haspopup="true"
            aria-expanded="false"
            aria-controls="{{ id }}-menu">
        {{ label }}
        <svg class="{{ css_prefix }}dropdown-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="m6 9 6 6 6-6"/>
        </svg>
    </button>
    {% endif %}
    <div class="{{ css_prefix }}dropdown-menu {{ css_prefix }}dropdown-{{ align }}"
         id="{{ id }}-menu"
         role="menu"
         style="display:none;">
        {% if slot_menu %}{{ slot_menu|safe }}{% endif %}
    </div>
</div>