@agala-labs/ui

Section Nav

Navigates peer sections within one settings or detail surface.

Examples

Configuración

Clínica

Gestioná la identidad y los datos de contacto de tu clínica.

Nombre: Estudio dental
Contacto: hola@clinica.test
Estado: Información completa

Selected: clinica

<AgalaSectionNav v-model="section" :items="sections" aria-label="Configuration sections" />

Import

import { AgalaSectionNav } from '@agala-labs/ui'

API

Prop	Type	Default	Description
`items`	`SectionNavItem[]`	—	One-level destinations with value, label, and optional icon, href, disabled state, or badge.
`modelValue`	`string`	—	Required active item value.
`variant`	`'panel' \| 'plain'`	`'panel'`	Surface treatment.
`density`	`'compact' \| 'comfortable'`	`'compact'`	Row density.
`responsive`	`'scroll' \| 'stack'`	`'scroll'`	Narrow-screen behavior.
`ariaLabel`	`string`	`'Section navigation'`	Accessible navigation name.
`class`	`string`	—	Consumer override class.

Events

update:modelValue(value: string)
select(item, event)

Accessibility

Uses native navigation, links, and buttons. Active links expose aria-current="page"; disabled destinations remain visible and unavailable. Scroll mode reveals the active item without widening the document.