Navegación
Moverse por el sitio usa un único conjunto de controles de navegación que se remodela según la pantalla en lugar de varios por separado. El mismo dock va de borde a borde en el móvil, es una píldora flotante en la tableta y desaparece en escritorio, donde la navegación superior toma el relevo.
Un mismo chrome, tres viewports
Ninguna otra parte del sistema depende tanto del viewport como la navegación. Los marcos de abajo son la portada real renderizada al ancho de cada banda, sea cual sea el dispositivo desde el que lees: el dock ocupa todo el ancho en un teléfono, flota como una píldora en una tableta y da paso a los enlaces de la barra superior en escritorio.
Los marcos de abajo son las páginas reales renderizadas a anchos reales y con los scripts desactivados, así que siempre muestran el tema claro y dentro de ellos no se ejecuta ninguna analítica.
Barra superior
Una barra fija que lleva el logotipo y los controles de utilidad (idioma, tema y búsqueda del blog). Mide 64 píxeles de alto en escritorio, 60 en tableta y 56 en el móvil. En escritorio también alberga los tres enlaces de sección; por debajo de 1280 estos pasan al dock.
Dock de pestañas
La navegación principal por secciones en móvil y tableta: cuatro pestañas: Inicio, Blog, Trabajo, Reservar llamada. Es un único elemento con un punto de ruptura, no dos componentes. Los marcos de abajo son la página real recortada al dock: de borde a borde a 390 con la pestaña activa solo en texto verde, y una píldora flotante a 768 donde la activa gana un fondo tintado. Cuatro pestañas es estructural; una quinta no cabría en la retícula, y por eso esta sección del sistema de diseño vive en el pie.
Barra de acciones de lectura
En una página de lectura, una barra de acciones contextual sustituye al dock, no se le suma: un anillo de progreso con la sección actual abre la hoja del índice, y después compartir y volver arriba. Este es el componente ReadingBar real, mostrado a mitad de artículo. Una barra cada vez: chrome de navegación o chrome de lectura, nunca ambos.
Navegación de la documentación
La navegación de esta sección sigue la anatomía del artículo del blog en lugar de inventar la suya: en el móvil la barra superior cambia el logo por un chevrón de vuelta a la portada de Diseño con un título plegable, la barra de lectura sustituye al dock y su botón de anillo abre los contenidos como una hoja inferior, y en escritorio los contenidos quedan fijados a la derecha como el ToC del artículo, resaltando la sección en la que estás. La miga de pan nombra el grupo, y la página de inicio de la sección es el índice.
Miga de pan
Un pequeño rastro en versalitas mono sobre el título de la página. Nombra lugares, nunca la propia página: eso lo hace el título de debajo, así que el rastro termina un nivel por encima. Cada segmento se corta con puntos suspensivos, y los nombres largos de serie se acortan en origen (“React Native” pasa a “RN”), de modo que el rastro no puede partirse en dos líneas.
<Breadcrumb label="…" items={[{ label, href }, …]} />Aparece en los artículos (Blog y después la serie), en las páginas de etiquetas y series, y en esta documentación. En el móvil convive con el chevrón de la barra superior: el chevrón te lleva atrás, el rastro te dice dónde estás.
Piezas menores
Cuatro piezas menores completan el conjunto de navegación. Una barra de progreso verde fija de 3 píxeles corona cada artículo y cada página de esta documentación. Un botón redondo de volver arriba aparece flotando cuando la página es lo bastante larga. El feed del blog pagina con enlaces numerados en escritorio y una única píldora de cargar más en el móvil. Y la página 404 mantiene la misma voz: un 404 grande, una línea, y botones de contorno de vuelta a Inicio, Blog y Trabajo.
Cuándo usarlo
Hazlo
No lo hagas
Hazlo
No lo hagas
Dónde vive
Nav.astro (.nav), TabBar.astro, ReadingBar.astro y Footer.astro (.footer). El dock y la barra de lectura de arriba son esos componentes renderizados en vivo; los marcos muestran la barra superior en su sitio.