Navbar

No se renderiza en vivo en esta página. El navbar va dentro del slot navbar de <x-kore::shell> y depende de su layout de página completa. Pruébalo en la demo en vivo.

Uso básico

Va en el slot navbar del shell, que la coloca sobre el contenido (no sobre el sidebar).

<x-kore::navbar>
    <x-slot:end>
        <x-kore::theme-switch size="sm" />
        <x-kore::avatar name="Ana García" size="sm" />
    </x-slot:end>
</x-kore::navbar>

<x-kore::navbar>
    <x-slot:end>
        <x-kore::theme-switch size="sm" />
        <x-kore::avatar name="Ana García" size="sm" />
    </x-slot:end>
</x-kore::navbar>

Slots

Tres zonas horizontales.

Slot	Descripción
`start`	Izquierda, después del botón de menú (breadcrumbs, título de página…)
`default`	Centro (una búsqueda, por ejemplo)
`end`	Derecha (tema, avatar, notificaciones…)

El botón de menú

Viene incluido y hace lo correcto según el dispositivo.

En escritorio colapsa el sidebar y en móvil abre el drawer. Es lo que se espera de un botón de menú, y evita tener que poner dos.

Si prefieres colocarlo en otro sitio, quítalo con :toggle="false" y usa el componente suelto:

<x-kore::navbar :toggle="false">
    <x-slot:start>
        <x-kore::sidebar.toggle />
        <x-kore::breadcrumbs />
    </x-slot:start>
</x-kore::navbar>

<x-kore::navbar :toggle="false">
    <x-slot:start>
        <x-kore::sidebar.toggle />
        <x-kore::breadcrumbs />
    </x-slot:start>
</x-kore::navbar>

<x-kore::sidebar.toggle> habla con el store de Alpine, así que funciona desde cualquier parte de la página: no necesita estar dentro del sidebar ni del shell. Ver su API completa en Sidebar.

Accesibilidad: role toolbar

La navbar reutiliza x-kore::toolbar por dentro, pero le quita el role=toolbar.

Ese rol le promete a un lector de pantalla un widget que se recorre con las flechas del teclado. Una cabecera de página no lo es, y anunciarlo así rompería la navegación de quien depende de ello. Por eso el navbar pasa :role="false" al toolbar interno — se emite como <header>, que es lo que realmente es.

Props

Prop	Tipo	Default	Descripción
`sticky`	bool	config(true)	Se queda arriba al hacer scroll
`bordered`	bool	config(true)	Borde inferior
`toggle`	bool	true	Incluir el botón de menú
`toggleFor`	string	main	A qué sidebar controla ese botón

Configuración

Personaliza los defaults en config/kore-ui.php, sección shell.navbar.

config/kore-ui.php

'shell' => [
    'navbar' => [
        'sticky'   => true,
        'bordered' => true,
    ],
],