Todos los componentes (204)

Barra superior

Navegación · TopBar

Qué es y cuándo usarlo

La cabecera de la aplicación: la marca a la izquierda, la navegación principal en horizontal y las acciones (avisos, cuenta) a la derecha. Con skipTo trae puesto el enlace de «Saltar al contenido».

Cuándo usarlo

Arriba de todas las pantallas de una web o de una aplicación con pocas secciones principales: brand, links (con current en la página actual) y actions.
skipTo con el id del contenido principal: siempre que haya navegación antes del contenido, que es casi siempre. skipText cambia el texto del enlace.
sticky si la página es larga y las acciones tienen que seguir a mano al desplazarse.

Cuándo no

Para el menú de un panel de gestión con muchas secciones: SideNav.
Para la cabecera de una pantalla concreta, con su título y sus botones: PageHeader.
Para un aviso que ocupa todo el ancho (mantenimiento, prueba caducada): GlobalAlert.

Teclado: con skipTo, el primer Tab enseña «Saltar al contenido»; Intro lleva el foco al contenido principal, no solo el desplazamiento. Después, Tab recorre la marca (si es un enlace), los enlaces y las acciones.

Accesibilidad: es un header (banner) con un nav dentro, llamado «Principal» o lo que diga navigationLabel. La página actual lleva aria-current="page" y se marca con fondo y subrayado, no solo con color. El enlace de saltar vive fuera de la vista hasta que recibe el foco: no se esconde con display: none, que lo sacaría del orden del Tab.

Aspecto fino: variables CSS --amset-bar-sup-*: -background, -font, -gap, -padding-block, -padding-inline. El tamaño mueve el hueco, el relleno y el cuerpo de letra.

Cómo se ve

Saltar al contenido

AMSET UI

Banco de pruebas

<TopBar
  brand="AMSET UI"
  links={[
    { key: 'componentes', label: 'Componentes', href: '/componentes/', current: true },
    { key: 'empezar', label: 'Empezar', href: '/empezar/' },
  ]}
  actions={<ButtonLink href="https://ui.amset.tech" size="sm" variant="outline">Banco de pruebas</ButtonLink>}
  skipTo="contenido"
/>

Props

Se importa con import { TopBar } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`brand`obligatoria	`ReactNode`	El logotipo o el nombre. Si es un enlace, que lleve al inicio.
`actions`	`ReactNode`	Lo de la derecha: buscador, avisos, menu de la cuenta.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`links`	`readonly BarLink[]`	—
`navigationLabel`	`string`	Nombre de la navegacion, por si hay mas de una en la pagina.
`size`	`"sm" \| "md" \| "lg"`	El hueco, el relleno y el cuerpo de letra de la barra.
`skipText`	`string`	—
`skipTo`	`string`	Id del contenido principal. Pone el enlace de saltar, que sale del hueco al tabular: sin el, quien usa el teclado se come la navegacion entera en cada pagina antes de llegar a lo que ha venido a leer.
`sticky`	`boolean`	Se queda pegada arriba al desplazar.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: