Menu button
Botón hamburger con animación a X. Estado controlado por aria-expanded; click para alternar con Datastar.
<button class="menu-button"
aria-label="Menú"
aria-expanded="false">
<span class="menu-button-lines"><span class="menu-button-line"></span><span class="menu-button-line"></span><span class="menu-button-line"></span></span>
</button>
<button class="menu-button"
aria-label="Cerrar"
aria-expanded="true">
<span class="menu-button-lines"><span class="menu-button-line"></span><span class="menu-button-line"></span><span class="menu-button-line"></span></span>
</button>
{% from "menu-button.jinja" import menu_button %}
{{ menu_button() }}
{{ menu_button(label="Cerrar", expanded=True) }}
<MenuButton />
<MenuButton label="Cerrar" expanded />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div data-signals="{ menu: false }">
<button class="menu-button"
aria-label="Menú"
aria-expanded="false" data-attr:aria-expanded="$menu" data-on:click="$menu = !$menu">
<span class="menu-button-lines"><span class="menu-button-line"></span><span class="menu-button-line"></span><span class="menu-button-line"></span></span>
</button>
<span data-text="$menu ? 'Abierto' : 'Cerrado'" style="margin-left: 14px; color: var(--ink-3);">Cerrado</span>
</div>
{% from "menu-button.jinja" import menu_button %}
<div data-signals="{ menu: false }">
{{ menu_button(attrs={"data-attr:aria-expanded": "$menu", "data-on:click": "$menu = !$menu"}) }}
<span data-text="$menu ? 'Abierto' : 'Cerrado'" style="margin-left: 14px; color: var(--ink-3);">Cerrado</span>
</div>
<div data-signals="{ menu: false }">
<MenuButton data-attr:aria-expanded="$menu" data-on:click="$menu = !$menu" />
<span data-text="$menu ? 'Abierto' : 'Cerrado'" style="margin-left: 14px; color: var(--ink-3);">Cerrado</span>
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Aplica .ok-menu-btn--mobile-only
<button class="menu-button mobile-only"
aria-label="Menú"
aria-expanded="false">
<span class="menu-button-lines"><span class="menu-button-line"></span><span class="menu-button-line"></span><span class="menu-button-line"></span></span>
</button>
<span style="margin-left: 12px; color: var(--ink-3); font-size: 13px;">Aplica <code>.ok-menu-btn--mobile-only</code></span>
{% from "menu-button.jinja" import menu_button %}
{{ menu_button(mobile_only=True) }}
<span style="margin-left: 12px; color: var(--ink-3); font-size: 13px;">Aplica <code>.ok-menu-btn--mobile-only</code></span>
<MenuButton mobile_only />
<span style="margin-left: 12px; color: var(--ink-3); font-size: 13px;">Aplica <code>.ok-menu-btn--mobile-only</code></span>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
|---|
label | str | "Menú" | aria-label. |
expanded | bool | False | Estado inicial. Cambia con Datastar. |
mobile_only | bool | False | Oculto en ≥768px (toggle de drawer). |
attrs | dict | {} | Atributos HTML extra (data-on:click, etc). |