Pestañas y migas
Pestañas para cambiar de contenido dentro de una misma página; filtros en píldora para acotar una lista; ruta de migas para ubicarse.
Pestañas con subrayado
<ul class="nav nav-tabs mr-tabs w-100">
<li class="nav-item"><a class="nav-link active" href="#navegacion"><i class="ri-history-line"></i>Seguimiento</a></li>
<li class="nav-item"><a class="nav-link" href="#navegacion"><i class="ri-mail-line"></i>Comunicación</a></li>
<li class="nav-item"><a class="nav-link" href="#navegacion"><i class="ri-user-line"></i>Detalles</a></li>
</ul>Píldoras y filtros
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#navegacion">Activos</a></li>
<li class="nav-item"><a class="nav-link" href="#navegacion">Ganados</a></li>
<li class="nav-item"><a class="nav-link" href="#navegacion">Perdidos</a></li>
</ul>
<div class="mr-filters">
<button type="button" class="mr-filter is-active">Todo</button>
<button type="button" class="mr-filter">Notas</button>
<button type="button" class="mr-filter">Mensajes</button>
</div>Ruta de migas
<nav aria-label="Ruta">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#navegacion" class="mr-link">Lista de registros</a></li>
<li class="breadcrumb-item active" aria-current="page">Detalle del registro</li>
</ol>
</nav>Título de pantalla con migas de pan
El último elemento es la página actual y no lleva enlace.
<x-maristas::page-bar title="Detalle del funnel"
:items="[['name' => 'Inicio', 'href' => route('dashboard')], ['name' => 'Detalle del funnel']]" />Banner de encabezado
Para la cabecera de una pantalla con título, texto de apoyo y acciones. Los botones llevan variant light (principal, blanco) y outline-light (secundario, fantasma sobre fondo oscuro).
<x-maristas::banner title="Eventos" eyebrow="Gestión" icon="ri-calendar-event-line"
description="Administra las convocatorias y actividades.">
<x-maristas::button variant="outline-light" icon="ri-price-tag-3-line">Categorías</x-maristas::button>
<x-maristas::button variant="light" icon="ri-add-line">Nuevo evento</x-maristas::button>
</x-maristas::banner>Pie de página y botón para volver arriba
Incluye el botón una sola vez en el diseño: aparece al bajar y vuelve al inicio con desplazamiento suave.
<x-maristas::footer product="SIGEM" version="V.2.0">Maristas | {{ now()->year }}</x-maristas::footer>
<x-maristas::back-to-top />