fn-design-system/components/nav_link.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, framework, props, output, tested, tests, test_file_path, file_path, emits, has_state, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	framework	props	output	tested	tests	test_file_path	file_path	emits	has_state	variant
nav_link	component	ts	ui	1.0.0	impure	FnNavLink(props: FnNavLinkProps): JSX.Element	Link de navegacion con icono, descripcion y anidamiento. Wrapper sobre Mantine NavLink.	mantine navigation link sidebar menu component ui				false		@mantine/core	react	name type required description label string true Texto principal del link name type required description description string false Texto secundario debajo del label name type required description icon ReactNode false Icono a la izquierda del label name type required description active boolean false Estado activo/seleccionado name type required description onClick MouseEventHandler false Callback al hacer click name type required description href string false URL para navegacion como anchor name type required description children ReactNode false NavLinks hijos para crear arbol anidado name type required description opened boolean false Controla si los hijos estan expandidos name type required description defaultOpened boolean false Estado inicial de expansion de hijos	Link de navegacion con highlight activo, icono y soporte para sub-items colapsables	false			frontend/functions/ui/nav_link.tsx		false

Ejemplo

import { FnNavLink } from '@fn_library'
import { IconHome, IconSettings } from '@tabler/icons-react'

<FnNavLink label="Home" icon={<IconHome size={16} />} active />
<FnNavLink label="Settings" icon={<IconSettings size={16} />} defaultOpened>
  <FnNavLink label="General" />
  <FnNavLink label="Seguridad" />
</FnNavLink>

Notas

Wrapper sobre Mantine NavLink. Soporta anidamiento -- pasar FnNavLink como children crea un arbol colapsable. El icon se mapea a leftSection internamente. Ideal para uso dentro de FnAppShell navbar.