Breadcrumb muestra la ubicación jerárquica dentro de la aplicación. Presenta niveles anteriores como links y el nivel actual como estado activo para mantener contexto y facilitar la navegación.
Item link · separator · current page · overflow
Importá estilos base y los subcomponentes de Breadcrumb.
1import 'nave-ui-library/styles.css'2import {3 Breadcrumb,4 BreadcrumbList,5 BreadcrumbItem,6 BreadcrumbLink,7 BreadcrumbPage,8 BreadcrumbSeparator,9 BreadcrumbEllipsis,10} from 'nave-ui-library/react'Estructura recomendada: niveles previos navegables y página actual no navegable.
Cuando hay más de cuatro niveles, colapsá niveles intermedios con `BreadcrumbEllipsis`.
Soporta `medium` (20px) y `small` (18px). Desktop recomienda `medium`.
Referencia visual de estado por ítem: default, hover y current.
En hover, el link aplica color de hover y subrayado según tokens.
Props disponibles para el root y subcomponentes de Breadcrumb.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'medium' | medium | Tamaño del breadcrumb en el contenedor raíz. |
tokens | Partial<ThemeTokensBase> | — | Override opcional de tokens para el componente. |
children | React.ReactNode | — | Estructura compuesta con BreadcrumbList, Item, Link/Page y Separator. |
asChild | boolean | false | Disponible en BreadcrumbLink para renderizar con Slot. |
href | string | — | URL de destino en BreadcrumbLink. |
className | string | — | Clases CSS adicionales para personalización. |
1{2 "name": "Breadcrumb",3 "description": "Breadcrumb para navegación jerárquica.",4 "component": "Breadcrumb",5 "files": [6 "components/base/navegation/Breadcrumb.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-slot"11 ],12 "props": {13 "size": {14 "type": "'small' | 'medium'",15 "default": "medium",16 "description": "Tamaño del breadcrumb en el contenedor raíz."17 },18 "tokens": {19 "type": "Partial<ThemeTokensBase>",20 "description": "Override opcional de tokens para el componente."21 },22 "children": {23 "type": "React.ReactNode",24 "required": true,25 "description": "Estructura compuesta con BreadcrumbList, Item, Link/Page y Separator."26 },27 "asChild": {28 "type": "boolean",29 "default": "false",30 "description": "Disponible en BreadcrumbLink para renderizar con Slot."31 },32 "href": {33 "type": "string",34 "description": "URL de destino en BreadcrumbLink."35 }36 }37}