LifeUI

1.53.2

Tree Navigation

Se utiliza para mostrar la navegación principal en la barra lateral de una aplicación.

Navegacion agrupada

Panel principal

Tools

Enrutamiendo

Si estas usando Next.js o librerias de enrutamiento como React router, podras proveer los componentes de enrutamiento que te brindan para poder cambiar el elemento de navegacion predeterminado

Sobreescribir estilos

Props

TreeNavigation

Prop	Tipo	Requerido	Descripción
`items`	`NavItem[]`	-	La lista de elementos de navegación que se mostrarán
`itemAs`	`{ element: ElementType, hreProp: string }`	-	Cambia el elemento de navegacion predeterminado por uno personalizado
`classNames`	`{ root?: string; triggerItem?: string; subNavigation?: string }`	-	Permite aplicar clases personalizados para los slots del arbol de navegación.
`onClickItem`	`(itemKey: string, type: "item" \| "menu") => void`	-	Devolucion de llamada que se ejecutara cuando pulsas un elemento

NavigationGroup

Prop	Tipo	Requerido	Descripción
`title`	`string`	-	El titulo de la seccion

Tipos

NavItem

Prop	Tipo	Requerido	Descripción
`key`	`string`	-	Una llave unica para el elemento
`icon`	`ReactNode`	-	El icono del elemento
`label`	`string`	-	La cadena de texto a renderizar
`selected`	`boolean`	-	Indica si el elemento esta activo
`disabled`	`boolean`	-	Indica si el elemento esta deshabilitado
`action`	`() => void`	-	Devolucion de llamada que se ejecutara cuando pulsas un elemento
`subNavigation`	`NavItem[]`	-	Lista de subelementos para un elemento de navegacion

Se utiliza para activar o desactivar entre varias opciones

Una función de utilidad que combina el uso de `clsx` y `tailwind-merge` para una gestión sencilla de los nombres de clases de Tailwind CSS.