Menubar

Barra de menú estilo macOS/Windows: nombre de app + menús desplegables. Usa menubar_item(id, label) para los triggers y menubar_panel(for_item) para los paneles. La interactividad se cablea con Datastar a través de un signal compartido open en la barra (id del menú abierto, o cadena vacía).

Menubar default · interactivo (Datastar)

<div style="position:relative;width:100%;min-height:240px">
<nav class="menubar"
  data-signals="{ open: '' }">
  <span class="menubar-app-name">ERPlora</span><span class="menubar-divider" aria-hidden="true"></span>
  
  <button type="button"
        class="menubar-menu"
        data-on:click="$open = $open === 'file' ? '' : 'file'"
        data-attr:aria-expanded="$open === 'file'"
        data-attr:data-state="$open === 'file' ? 'open' : 'closed'">File</button>
  <div class="menubar-panel"
     data-show="$open === 'file'"
     style="left:90px">
  
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>New document</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+N</span>
    </button>
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>Open…</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+O</span>
    </button>
    <div class="menubar-separator"></div>
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>Print…</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+P</span>
    </button>
  
</div>
  <button type="button"
        class="menubar-menu"
        data-on:click="$open = $open === 'edit' ? '' : 'edit'"
        data-attr:aria-expanded="$open === 'edit'"
        data-attr:data-state="$open === 'edit' ? 'open' : 'closed'">Edit</button>
  <div class="menubar-panel"
     data-show="$open === 'edit'"
     style="left:130px">
  
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>Undo</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+Z</span>
    </button>
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>Redo</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+Y</span>
    </button>
  
</div>
  <button type="button"
        class="menubar-menu"
        data-on:click="$open = $open === 'view' ? '' : 'view'"
        data-attr:aria-expanded="$open === 'view'"
        data-attr:data-state="$open === 'view' ? 'open' : 'closed'">View</button>
  <button type="button"
        class="menubar-menu"
        data-on:click="$open = $open === 'window' ? '' : 'window'"
        data-attr:aria-expanded="$open === 'window'"
        data-attr:data-state="$open === 'window' ? 'open' : 'closed'">Window</button>
  <button type="button"
        class="menubar-menu"
        data-on:click="$open = $open === 'help' ? '' : 'help'"
        data-attr:aria-expanded="$open === 'help'"
        data-attr:data-state="$open === 'help' ? 'open' : 'closed'">Help</button>
  <span class="menubar-version">v3.1.0</span>

</nav>
</div>

{% from "menubar.jinja" import menubar, menubar_item, menubar_panel %}
<div style="position:relative;width:100%;min-height:240px">
{% call menubar(app_name="ERPlora") %}
  {{ menubar_item("file", "File") }}
  {% call menubar_panel("file", style="left:90px") %}
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>New document</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+N</span>
    </button>
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>Open…</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+O</span>
    </button>
    <div class="menubar-separator"></div>
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>Print…</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+P</span>
    </button>
  {% endcall %}
  {{ menubar_item("edit", "Edit") }}
  {% call menubar_panel("edit", style="left:130px") %}
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>Undo</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+Z</span>
    </button>
    <button class="menubar-item">
      <span class="menubar-item-icon"></span><span>Redo</span><span></span>
      <span class="menubar-item-shortcut">Ctrl+Y</span>
    </button>
  {% endcall %}
  {{ menubar_item("view", "View") }}
  {{ menubar_item("window", "Window") }}
  {{ menubar_item("help", "Help") }}
  <span class="menubar-version">v3.1.0</span>
{% endcall %}
</div>

<div style="position:relative;width:100%;min-height:240px">
<Menubar app_name="ERPlora">
  <MenubarItem id="file" label="File" />
  <MenubarPanel for_item="file" style="left:90px">
    <button class="menubar-item">…New document…</button>
    <button class="menubar-item">…Open……</button>
    <div class="menubar-separator"></div>
    <button class="menubar-item">…Print……</button>
  </MenubarPanel>
  <MenubarItem id="edit" label="Edit" />
  <MenubarPanel for_item="edit" style="left:130px">
    <button class="menubar-item">…Undo…</button>
    <button class="menubar-item">…Redo…</button>
  </MenubarPanel>
  <MenubarItem id="view" label="View" />
  <MenubarItem id="window" label="Window" />
  <MenubarItem id="help" label="Help" />
  <span class="menubar-version">v3.1.0</span>
</Menubar>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Variante floating + compact

<div style="position:relative;padding:16px;background:linear-gradient(135deg, color-mix(in oklch, var(--brand) 8%, var(--bg)), var(--bg-1));border-radius:10px">
<nav class="menubar floating compact"
  data-signals="{ open: '' }">
  <span class="menubar-app-name">ERPlora</span><span class="menubar-divider" aria-hidden="true"></span>
  
  <button type="button"
        class="menubar-menu"
        data-on:click="$open = $open === 'file' ? '' : 'file'"
        data-attr:aria-expanded="$open === 'file'"
        data-attr:data-state="$open === 'file' ? 'open' : 'closed'">File</button>
  <button type="button"
        class="menubar-menu"
        data-on:click="$open = $open === 'view' ? '' : 'view'"
        data-attr:aria-expanded="$open === 'view'"
        data-attr:data-state="$open === 'view' ? 'open' : 'closed'">View</button>
  <button type="button"
        class="menubar-menu"
        data-on:click="$open = $open === 'help' ? '' : 'help'"
        data-attr:aria-expanded="$open === 'help'"
        data-attr:data-state="$open === 'help' ? 'open' : 'closed'">Help</button>

</nav>
</div>

{% from "menubar.jinja" import menubar, menubar_item %}
<div style="position:relative;padding:16px;background:linear-gradient(135deg, color-mix(in oklch, var(--brand) 8%, var(--bg)), var(--bg-1));border-radius:10px">
{% call menubar(app_name="ERPlora", variant="floating", compact=True) %}
  {{ menubar_item("file", "File") }}
  {{ menubar_item("view", "View") }}
  {{ menubar_item("help", "Help") }}
{% endcall %}
</div>

<div style="position:relative;padding:16px;background:linear-gradient(135deg, color-mix(in oklch, var(--brand) 8%, var(--bg)), var(--bg-1));border-radius:10px">
<Menubar app_name="ERPlora" variant="floating" compact>
  <MenubarItem id="file" label="File" />
  <MenubarItem id="view" label="View" />
  <MenubarItem id="help" label="Help" />
</Menubar>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Menubar con panel abierto (estado estático para documentación)

<div style="position:relative;min-height:240px">
<nav class="menubar"
  data-signals="{ open: '' }">
  <span class="menubar-app-name">Demo</span><span class="menubar-divider" aria-hidden="true"></span>
  
<button class="menubar-menu is-open">File</button>
<div class="menubar-panel" style="left:60px;display:block">
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>New document</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+N</span>
  </button>
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>Open…</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+O</span>
  </button>
  <div class="menubar-separator"></div>
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>Print…</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+P</span>
  </button>
</div>
<button class="menubar-menu">Edit</button>
<button class="menubar-menu">View</button>

</nav>
</div>

{% from "menubar.jinja" import menubar %}
<div style="position:relative;min-height:240px">
{% call menubar(app_name="Demo") %}
<button class="menubar-menu is-open">File</button>
<div class="menubar-panel" style="left:60px;display:block">
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>New document</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+N</span>
  </button>
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>Open…</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+O</span>
  </button>
  <div class="menubar-separator"></div>
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>Print…</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+P</span>
  </button>
</div>
<button class="menubar-menu">Edit</button>
<button class="menubar-menu">View</button>
{% endcall %}
</div>

<div style="position:relative;min-height:240px">
<Menubar app_name="Demo">
<button class="menubar-menu is-open">File</button>
<div class="menubar-panel" style="left:60px;display:block">
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>New document</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+N</span>
  </button>
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>Open…</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+O</span>
  </button>
  <div class="menubar-separator"></div>
  <button class="menubar-item">
    <span class="menubar-item-icon"></span><span>Print…</span><span></span>
    <span class="menubar-item-shortcut">Ctrl+P</span>
  </button>
</div>
<button class="menubar-menu">Edit</button>
<button class="menubar-menu">View</button>
</Menubar>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API · menubar

Prop	Tipo	Default	Descripción
`app_name`	str\|None	None	Nombre de aplicación a la izquierda.
`variant`	"floating"\|None	None	Estilo flotante macOS.
`compact`	bool	false	Reducir paddings y tamaños.
`attrs`	dict	{}	Atributos HTML extra.
(slot)	—	—	Triggers (`menubar_item`) y paneles (`menubar_panel`) ligados al signal compartido `$open`.

API · menubar_item

Prop	Tipo	Default	Descripción
`id`	str	—	Identificador único; valor que toma `$open` cuando este menú está abierto.
`label`	str	—	Texto visible del trigger.
`attrs`	dict	{}	Atributos HTML extra.

API · menubar_panel

Prop	Tipo	Default	Descripción
`for_item`	str	—	Id del `menubar_item` que controla este panel.
`style`	str	""	Estilos en línea (típicamente `left:<px>` para alinear con el trigger).
`attrs`	dict	{}	Atributos HTML extra.
(slot)	—	—	Contenido del panel (botones `.ok-menubar-item`, separadores).