Breadcrumb

Uso

Proporciona items desde el primer nivel hasta la página actual. route utiliza RouterLink de Angular; url abre un destino externo en una pestaña nueva. El último elemento siempre es la página actual y no es un enlace. separator es decorativo. Las claves icon opcionales se resuelven mediante el resolver de iconos de la aplicación.

Ejemplos

Prueba el comportamiento y consulta el código ejecutable en Código.

Prueba y configura

Cambia las opciones, prueba el resultado y consulta su template generado. Abre Código para ver la implementación completa.

<neu-breadcrumb
  [items]="items()"
  separator="/"
/>

import { signal } from '@angular/core';

export const items = signal([
  {
    "label": "Inicio",
    "route": "/es",
    "icon": undefined
  },
  {
    "label": "Componentes",
    "route": "/es/components"
  },
  {
    "label": "Breadcrumb"
  }
]);

import { signal } from "@angular/core";
import type { NeuBreadcrumbItem } from "@neural-ui/core/breadcrumb";

export const items = signal<NeuBreadcrumbItem[]>([
  {
    "label": "Inicio",
    "route": "/es"
  },
  {
    "label": "Componentes",
    "route": "/es/components"
  },
  {
    "label": "Breadcrumb"
  }
]);

Datos y contenido

items y separator son Inputs. Breadcrumb no tiene Outputs; la navegación pertenece a RouterLink o al navegador. No incluyas botones de acción ni estados de selección editables en la lista.

Accesibilidad y teclado

Breadcrumb es una zona de navegación con una lista ordenada. El último elemento tiene aria-current="page". Los enlaces superiores admiten navegación nativa por teclado; los separadores e iconos opcionales se ocultan a las tecnologías de asistencia.

API

Los Inputs y Outputs corresponden al paquete Core fijado. Los tipos con nombre enlazan a sus definiciones. Templates incluye ejemplos ejecutables de cada zona disponible.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuIconKey } from '@neural-ui/core/foundation';

import type { NeuBreadcrumbItem } from '@neural-ui/core/breadcrumb';

// Declaración pública (solo referencia)
export interface NeuBreadcrumbItem {
  icon?: NeuIconKey;
  label: string;
  route?: string | string[];
  url?: string;
}

import type { NeuIconKey } from '@neural-ui/core/foundation';

// Declaración pública (solo referencia)
export type NeuIconKey = string;

Estilos y tokens

Utiliza los tokens públicos de superficie, texto, espaciado y foco. Comprueba el contenido en ambos temas y con anchos reducidos.

Componentes relacionados

Combina estos componentes para construir la interfaz del entorno.

• Tabs
• Panel