'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navegación
AppSidebar
La navegación lateral de una web app: un menú del espacio de trabajo con acciones rápidas arriba, enlaces compactos con conteos y secciones que se pliegan. Combínalo con AppShell layout="sidebar".
import { AppSidebar, WorkspaceSwitcher, AppNavSection, AppNavItem } from '@alea/ui';
Ejemplos
Layout de web app
AppShell con layout="sidebar": el menú del espacio de trabajo y los enlaces compactos a la izquierda, la página en un panel interior. Estrecha la ventana: la barra lateral pasa a un drawer.
Secciones que se pliegan
Una AppNavSection con título se pliega con su chevron; la primera, sin título, queda abierta. Los conteos van a la derecha.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…
Space
--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…
Props
AppSidebar props
La navegación lateral de una web app: un selector de espacio de trabajo arriba, enlaces compactos, secciones que se pliegan. Combínala con AppShell layout="sidebar".
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | AppNavSections y AppNavItems. |
aria-label | string | - | Nombre de la navegación. Por defecto "Barra lateral". |
className | string | - | Clases extra para el elemento raíz. |
footer | ReactNode | - | La parte de abajo: un botón de invitar, un medidor del plan, ayuda. |
header | ReactNode | - | La parte de arriba: normalmente un WorkspaceSwitcher. Queda fija mientras los enlaces se desplazan. |
WorkspaceSwitcher props
El nombre del espacio de trabajo arriba de la barra lateral: un menú para cambiar de espacio, con acciones rápidas al lado.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
nameobligatoria | ReactNode | - | El nombre del espacio de trabajo o del producto. |
actions | ReactNode | - | Botones de ícono a la derecha: buscar, nuevo elemento. |
aria-label | string | - | Nombre del botón de menú. Por defecto "{name}, menú del espacio de trabajo" cuando name es texto. |
children | ReactNode | - | El menú: MenuItems para cambiar de espacio, ajustes, cerrar sesión. Sin él el nombre es texto plano. |
logo | ReactNode | - | Un logo o marca antes del nombre (unos 20 px). |
onAction | ((key: string | number) => void) | - | Se llama con el id del elemento del menú. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
AppSidebar
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-appnav.alea-appnav-header.alea-appnav-body.alea-appnav-footer
WorkspaceSwitcher
- Estados
- HoverPressed
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-ws-logo.alea-ws-name.alea-ws-chevron.alea-ws.alea-ws-button.alea-ws-actions- Atributos data
data-static
AppNavSection
- Estados
- Hover (CSS)Open
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-navsec.alea-navsec-head.alea-navsec-title.alea-navsec-chevron.alea-navsec-action.alea-navsec-list
AppNavItem
- Estados
- HoverCurrent
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-navitem.alea-navitem-icon.alea-navitem-label.alea-navitem-end- Atributos data
data-variant=filleddata-variant=segmentdata-appearance=soft
Accesibilidad
- Los enlaces son un landmark de navegación con su propio nombre.
- La página actual se marca con aria-current.
- El título de una sección es un botón con aria-expanded que controla su lista.
- El menú del espacio de trabajo es un botón de menú; su nombre dice que abre el menú del espacio de trabajo.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre el menú del espacio de trabajo, las acciones, los títulos de sección y los enlaces |
| Enter o Espacio sobre el título de una sección | Pliega o abre la sección |
| Enter sobre el nombre del espacio de trabajo | Abre el menú; las flechas se mueven, Escape lo cierra |
Qué hacer y qué evitar
Hacer
- Deja la primera sección sin título: los lugares a los que la gente va más.
- Usa íconos de 16 px y etiquetas cortas.
- Pon en end los conteos que piden atención.
Evitar
- No anides secciones dentro de secciones: usa un Tree.
- No pongas más de una docena de enlaces antes del primer pliegue.