Skip to main content

Sidebar

Un componente de navegación lateral altamente compatible que admite vistas anidadas. La navegación lateral ayuda a las personas a desplazarse dentro de una subsección de un producto.  Utilice la navegación lateral con el componente de diseño de página para diseñar su experiencia de navegación. Esto garantiza que obtenga acceso a funciones útiles de accesibilidad y personalización de forma predeterminada.

  • Podemos visualizar la representación de un sidebar dentro de una aplicación web

Anatomía Grid

  • Podemos visualizar la representación de un sidebar con subsecciones abiertas dentro de una aplicación web

Anatomía Grid

  • Podemos visualizar la representación de un sidebar móvil con subsecciones abiertas

Anatomía Grid

Mejores prácticas

A veces, necesitarás cargar parte del contenido de navegación lateral de forma asincrónica. Hay algunas cosas que debes tener en cuenta:

  • Utilice esqueletos solo cuando esté seguro de cómo se verá el estado cargado. La mayoría de los elementos que aparecen en la navegación lateral probablemente se puedan usar con esqueletos.
  • Al pasar de cargar el esqueleto a cargar los elementos, intente asegurarse de que el salto no se vea irregular: use el elemento de esqueleto equivalente que sea apropiado y tenga cuidado con los elementos que cambien de tamaño unos pocos píxeles. Deberíamos esforzarnos por lograr una interfaz de usuario que se sienta estable, lo que significa que no salte cuando se carga el contenido.

Recursos

Recruso de Figma