NavGroup

Agrupa una tanda de OrbitNavItem dentro de OrbitSidebar, con un título de sección opcional arriba (typography.overline, oculto entero cuando el riel está colapsado — no solo restyleado, un riel de solo íconos no tiene lugar ni para una línea). title es opcional: omitilo para una fila suelta sin grupo propio (un único ítem de “Ajustes” en el footer del sidebar, por ejemplo) — la única diferencia es exactamente ese título, las filas se ven igual.

Dentro de un OrbitSidebar, selectedId/onSelect/collapsed no hace falta pasarlos — el sidebar los provee automáticamente a cada OrbitNavGroup que tenga dentro (header, contenido o footer), así un riel con varios grupos comparte una sola selección sin repetir las mismas props en cada uno. Pasalos explícitos solo para un grupo con selección propia, separada del resto.

En Kotlin, OrbitNavGroup recibe una lista de datos (OrbitNavGroupItem) en vez de componer cada fila a mano — en web no existe ese objeto: los <orbit-nav-item> van directo como hijos livianos, y el propio <orbit-nav-group> delega el click para sincronizar selected entre ellos.

Uso

Web

<orbit-nav-group title="ESPACIOS" id="group">
  <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-group>

<script>
  group.addEventListener('orbit-nav-select', (e) => console.log(e.detail.id));
</script>

Compose Multiplatform

var selected by remember { mutableStateOf("screens") }
OrbitNavGroup(
    title = "ESPACIOS",
    items = listOf(
        OrbitNavGroupItem(id = "screens", label = "Pantallas", icon = OrbitIcon.Grid),
        OrbitNavGroupItem(id = "components", label = "Componentes", icon = OrbitIcon.Clipboard),
    ),
    selectedId = selected,
    onSelect = { selected = it },
)

Props

Prop	Tipo	Default	Descripción
items (Kotlin)	List<OrbitNavGroupItem>	—	{ id, label, icon?, enabled? }. En web, en cambio, se pasan como hijos <orbit-nav-item>.
title / attr title	String?	null	Encabezado de sección; null/vacío para un grupo sin título.
selectedId / attr selected	String?	hereda de OrbitSidebar	Id del ítem seleccionado (compara contra id/value de cada fila).
onSelect / evento orbit-nav-select	(String) -> Unit	hereda de OrbitSidebar	Se dispara al elegir una fila.
collapsed / attr collapsed	boolean	hereda de OrbitSidebar	Oculta el título y centra las filas en modo ícono-solo.