NavItem

Fila de sidebar/nav-rail — radius.md (8px), el mismo techo cuadrado que usa el resto de los controles rectangulares de Orbit, no una cápsula radius.full. Seleccionado rellena con un tinte suave de color.primary.500 (14% de opacidad) con ícono/texto en color.primary.700 — el acento crudo se leía demasiado parecido en luminosidad a su propio fondo tinteado como para contrastar; 700 es lo bastante oscuro/saturado para contrastar contra ese tinte tanto si sale pálido (modo claro) como un verde oscuro apagado (modo oscuro). El hover sin seleccionar pasa a surface.raised, un paso más claro que el transparente por defecto.

collapsed (heredado automáticamente de OrbitSidebar/OrbitNavGroup cuando está dentro de uno) oculta el label y encoge la fila a un chip cuadrado centrado del tamaño del ícono, con el label todavía disponible como tooltip nativo (title en web).

La mayoría de las filas van mejor agrupadas dentro de un OrbitNavGroup (sincroniza selected entre varias por vos) en vez de manejadas una por una como en el ejemplo de abajo.

Uso

Web

<orbit-nav-item value="screens" label="Pantallas" icon="grid" selected></orbit-nav-item>
<orbit-nav-item value="components" label="Componentes" icon="clipboard"></orbit-nav-item>
<orbit-nav-item value="export" label="Exportar" icon="upload-cloud"></orbit-nav-item>

Compose Multiplatform

var selected by remember { mutableStateOf("screens") }
OrbitNavItem(
    label = "Pantallas",
    icon = OrbitIcon.Grid,
    selected = selected == "screens",
    onClick = { selected = "screens" },
)
OrbitNavItem(
    label = "Componentes",
    icon = OrbitIcon.Clipboard,
    selected = selected == "components",
    onClick = { selected = "components" },
)
OrbitNavItem(
    label = "Exportar",
    icon = OrbitIcon.UploadCloud,
    selected = selected == "export",
    onClick = { selected = "export" },
)

Props

Prop	Tipo	Default	Descripción
label	string	—	Texto de la fila.
selected	boolean	—	Estado de selección.
onClick / evento click	() => void	—	Se dispara al hacer click/Enter/Espacio.
icon	OrbitIcon? / catálogo cerrado	null	Ícono antes del texto.
enabled / attr disabled	boolean	true	Habilita/deshabilita.
attr value (web)	string	—	Id de la fila; solo lo usa OrbitNavGroup para saber cuál sincronizar. Sin equivalente en Kotlin — OrbitNavGroup ahí usa OrbitNavGroupItem.id en su lugar.
collapsed	boolean	false	Oculta el label; suele heredarse de OrbitSidebar/OrbitNavGroup, no se setea a mano.