# Tree Estructura jerárquica navegable. Útil para listar causas por materia, carpetas de documentos o cualquier dato que tenga relación padre-hijo. ```tsx import { Tree, TreeItem, TreeItemLayout } from "@fluentui/react-components"; Civil C-2984-2025 C-1547-2025 ``` ## Default ### Cuándo usar - Datos con jerarquía clara y profundidad razonable (uno a tres niveles). - Carpetas, materias, agrupaciones de causas o documentos. - Cuando el usuario necesita ver el contexto completo del padre al elegir un hijo. ### Cuándo no usarlo - Para listas planas: usa una lista simple o una tabla. - Si la jerarquía es muy profunda (más de cuatro niveles): considera un breadcrumb más una lista. - Para la navegación principal del producto: usa el menú lateral. ## Con iconos ### Iconos para identificar tipo Usa **iconBefore** en `TreeItemLayout` para distinguir carpetas, documentos o causas. Reserva el icono filled (FILL=1) para indicar selección o estado abierto. ```tsx }> Documentos … ``` ## Tamaños ### Small y medium El tamaño **small** es útil cuando el árbol vive en un panel lateral estrecho; **medium** es el predeterminado para vistas principales. ```tsx … … ``` ## Accesibilidad ### Roles y teclado - El contenedor tiene role="tree" y cada nodo role="treeitem". Siempre incluye aria-label en el Tree. - Flechas arriba/abajo recorren los nodos visibles; flecha derecha expande, flecha izquierda colapsa o sube al padre. - Home y End saltan al primer y último nodo visible. - Escribir una letra busca el siguiente nodo cuyo label empiece por esa letra. ## Contenido ### Labels y profundidad - Labels cortos: una a tres palabras o un identificador (ej. C-2984-2025). - Mantén la profundidad acotada; si pasa de tres niveles, replantea la estructura. - Usa el mismo registro entre nodos del mismo nivel. - Si un nodo padre tiene muchos hijos, considera un contador en el label.