Toolbar

Barra superior sticky con backdrop blur. Contiene título de página opcional, búsqueda global, acciones rápidas (notificaciones, avatar) y, en móvil, botón menú. Slot libre para componer.

Toolbar con título y acciones

<header class="topbar">
  
  <h1 class="title">Pedidos</h1>
  
<div class="topbar-search">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
  <input placeholder="Buscar tickets, productos…"/>
  <span class="topbar-kbd">⌘K</span>
</div>
<div class="actions">
  <span class="pill success"><span class="pill-dot"></span>En línea</span>
  <span class="avatar sm brand">JC</span>
</div>

</header>

{% from "toolbar.jinja" import toolbar %}
{% call toolbar(page_title="Pedidos") %}
<div class="topbar-search">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
  <input placeholder="Buscar tickets, productos…"/>
  <span class="topbar-kbd">⌘K</span>
</div>
<div class="actions">
  <span class="pill success"><span class="pill-dot"></span>En línea</span>
  <span class="avatar sm brand">JC</span>
</div>
{% endcall %}

<Toolbar page_title="Pedidos">
<div class="topbar-search">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
  <input placeholder="Buscar tickets, productos…"/>
  <span class="topbar-kbd">⌘K</span>
</div>
<div class="actions">
  <span class="pill success"><span class="pill-dot"></span>En línea</span>
  <span class="avatar sm brand">JC</span>
</div>
</Toolbar>

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

Toolbar con back button

<header class="topbar">
  
  <div class="topbar-left">
    <button class="topbar-back-btn" aria-label="Volver" type="button">
      <iconify-icon icon="lucide:arrow-left" width="16" height="16"></iconify-icon>
    </button>
  </div>
  
  <h1 class="title">Pedido FCT-184</h1>
  
<div class="actions">
  <button class="btn ghost sm">Duplicar</button>
  <button class="btn primary sm">Guardar</button>
</div>

</header>

{% from "toolbar.jinja" import toolbar %}
{% call toolbar(page_title="Pedido FCT-184", back=True) %}
<div class="actions">
  <button class="btn ghost sm">Duplicar</button>
  <button class="btn primary sm">Guardar</button>
</div>
{% endcall %}

<Toolbar page_title="Pedido FCT-184" back>
<div class="actions">
  <button class="btn ghost sm">Duplicar</button>
  <button class="btn primary sm">Guardar</button>
</div>
</Toolbar>

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

Toolbar con breadcrumb

<header class="topbar with-crumb">
  
  
  
<div class="topbar-crumb">
  <span class="topbar-crumb-item">Inventario</span>
  <span class="topbar-crumb-sep">/</span>
  <span class="topbar-crumb-item">SKUs</span>
</div>

</header>

{% from "toolbar.jinja" import toolbar %}
{% call toolbar(with_crumb=True) %}
<div class="topbar-crumb">
  <span class="topbar-crumb-item">Inventario</span>
  <span class="topbar-crumb-sep">/</span>
  <span class="topbar-crumb-item">SKUs</span>
</div>
{% endcall %}

<Toolbar with_crumb>
<div class="topbar-crumb">
  <span class="topbar-crumb-item">Inventario</span>
  <span class="topbar-crumb-sep">/</span>
  <span class="topbar-crumb-item">SKUs</span>
</div>
</Toolbar>

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

Prop	Tipo	Default	Descripción
`page_title`	str\|None	None	Título de página opcional (h1).
`back`	bool	false	Renderiza botón de volver.
`attrs`	dict	{}	Atributos HTML extra.
(slot)	—	—	Búsqueda, acciones, breadcrumb.