Ruta de navegación (breadcrumb)

Navegación de rutas jerárquicas. Basada en la semántica nativa nav + ol: la página actual se marca automáticamente con aria-current="page" y no es clicable; admite separador personalizado y plegado por desbordamiento.

Uso básico

Uso básico

1. Inicio
2. Componentes
3. Breadcrumb

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>Inicio</LhBreadcrumbItem>
    <LhBreadcrumbItem>Componentes</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>Inicio</LhBreadcrumbItem>
    <LhBreadcrumbItem>Componentes</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Navegación por enlace

Navegación por enlace

1. Inicio
2. Guía
3. Página actual

Modo replace

1. Reemplazar historial
2. Página actual

<script setup lang="ts">
</script>

<template>
  <!-- Navegación por enlace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">Inicio</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">Guía</LhBreadcrumbItem>
    <LhBreadcrumbItem>Página actual</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- Modo replace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>Reemplazar historial</LhBreadcrumbItem>
    <LhBreadcrumbItem>Página actual</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <!-- Navegación por enlace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">Inicio</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">Guía</LhBreadcrumbItem>
    <LhBreadcrumbItem>Página actual</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- Modo replace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>Reemplazar historial</LhBreadcrumbItem>
    <LhBreadcrumbItem>Página actual</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Los elementos con to se renderizan como <a>; si se detecta vue-router, la navegación es por ruta (replace controla si se reemplaza el historial); en caso contrario se mantiene la navegación nativa. El último elemento siempre se renderiza como texto de la página actual.

Separador personalizado

Separador personalizado

1. Inicio
2. Componentes
3. Separador independiente

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">Inicio</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">Componentes</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      Separador independiente
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">Inicio</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">Componentes</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      Separador independiente
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Plegado por desbordamiento

Plegado por desbordamiento

1. Inicio
2. Directorio de nivel 1 A
3. Directorio de nivel 2 B
4. Directorio de nivel 3 C
5. Página actual

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">Inicio</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">Directorio de nivel 1 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">Directorio de nivel 2 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">Directorio de nivel 3 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>Página actual</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">Inicio</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">Directorio de nivel 1 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">Directorio de nivel 2 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">Directorio de nivel 3 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>Página actual</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Al superar maxItems, se conservan el primer elemento, unos puntos suspensivos y los últimos elementos; al hacer clic en los puntos suspensivos se expande todo.

Breadcrumb API

Props

Prop	Descripción	Tipo	Predeterminado
separator	Carácter del separador	string	'/'
maxItems	Número máximo de elementos visibles (primer elemento + puntos suspensivos + últimos elementos); al superarlo se pliega	number	0
sx	Props de disposición rápida	LhSxProps	—

LhBreadcrumbItem Props

Prop	Descripción	Tipo	Predeterminado
to	Dirección de salto; si existe y no es el último elemento, se renderiza como enlace	string	—
replace	Si el salto con vue-router se hace en modo replace	boolean	false

Slots

Slot	Descripción	Componente afectado
default	Elementos de la ruta	LhBreadcrumb
default	Contenido del elemento	LhBreadcrumbItem
separator	Separador personalizado (prevalece sobre el separator global)	LhBreadcrumbItem

Accesibilidad

• El elemento raíz es un <nav aria-label> (toma el paquete de idioma breadcrumb.label) que envuelve un <ol>; el orden semántico coincide con el del documento
• La página actual (último elemento) se renderiza como texto y recibe automáticamente aria-current="page"; aunque se pase to, no es clicable
• El separador lleva aria-hidden="true" y no entra en el árbol de accesibilidad
• Los puntos suspensivos de plegado son un <button> real, cuyo aria-label proviene del paquete de idioma breadcrumb.more; al hacer clic se expande todo

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/breadcrumb/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhBreadcrumbProps

export interface LhBreadcrumbProps {
  /** Carácter del separador */
  separator?: string
  /** Número máximo de elementos visibles (primer elemento + puntos suspensivos + últimos elementos); al superarlo se pliega; 0 o sin valor indica que no se pliega */
  maxItems?: number
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhBreadcrumbItemProps

export interface LhBreadcrumbItemProps {
  /** Dirección de salto; si existe y no es el último elemento, se renderiza como enlace (si se detecta vue-router, salto de ruta; en caso contrario, navegación nativa) */
  to?: string
  /** Si el salto con vue-router se hace en modo replace (sin efecto si no hay router) */
  replace?: boolean
}