Navegación

Breadcrumbs

Migas de pan: indican la posición dentro de la jerarquía y dejan volver a cualquier nivel de un clic. Son un complemento de la navegación principal.

Los antecesores son enlaces y toman el color de un enlace de navegación; el nivel actual es texto, con peso 600 y el color del texto de exposición. Los niveles se separan con un chevron.

Uso

<vadavo-breadcrumb> genera el ol; cada nivel es un li que el propio elemento recibe como hijo directo, con un enlace dentro, salvo el último, que es un span con la clase current. El chevron que separa un nivel del anterior lo coloca el propio componente.

<vadavo-breadcrumb>
    <li><a href="javascript:void(0)">Inicio</a></li>
    <li><a href="javascript:void(0)">Hosting</a></li>
    <li><span class="current">WordPress</span></li>
</vadavo-breadcrumb>

Primer nivel como icono

En las aplicaciones, el primer nivel se reduce a un icono de casa con la clase home, para ganar espacio en pantallas estrechas.

<vadavo-breadcrumb>
    <li>
        <a href="javascript:void(0)" class="home">
            <vadavo-icon name="home"></vadavo-icon>
        </a>
    </li>
    <li><a href="javascript:void(0)">Facturación</a></li>
    <li><span class="current">Factura #2026-0148</span></li>
</vadavo-breadcrumb>

Colapsado

A partir de cuatro niveles el componente pliega los intermedios por sí mismo, dejando la raíz y los dos últimos, y coloca un botón «…» que los despliega al pulsarlo. La lista se escribe entera.

<vadavo-breadcrumb>
    <li><a href="javascript:void(0)">Inicio</a></li>
    <li><a href="javascript:void(0)">Servicios</a></li>
    <li><a href="javascript:void(0)">Hosting</a></li>
    <li><a href="javascript:void(0)">Dominios</a></li>
    <li><span class="current">Renovación</span></li>
</vadavo-breadcrumb>

Sobre fondo de marca

Dentro de un contenedor con la clase spotlight, los enlaces y el separador toman los valores que fija esa superficie, para mantener el contraste sobre ella.

<div class="spotlight" style="padding:20px;border-radius:var(--surface--radius--container)">
    <vadavo-breadcrumb>
        <li><a href="javascript:void(0)">Inicio</a></li>
        <li><a href="javascript:void(0)">Hosting</a></li>
        <li><span class="current">WordPress</span></li>
    </vadavo-breadcrumb>
</div>

Tokens semánticos