El menú de desbordamiento indica que hay más contenido en un objeto de interfaz de usuario del que se puede mostrar de una sola vez. Se pueden ocultar listas, opciones y funcionalidades adicionales en un menú expandible para no saturar la interfaz principal.
B. Menú de desbordamiento en una navegación superior.
El menú de desbordamiento se indica con un ícono de puntos suspensivos. Aparece en el extremo (derecho) de una fila de títulos de navegación o en una fila de contenido.
Ícono de puntos suspensivos: el menú de desbordamiento de la tabla se indica con un ícono de puntos suspensivos que siempre aparece en el lado derecho de una fila de la tabla.
Menú desplegable: el menú de desbordamiento consta de una lista de interacciones adicionales, por ejemplo, herramientas/acciones, por ejemplo, eliminar, editar, duplicar (fila duplicada).
Sombra del menú desplegable: se utiliza una sombra como parte del menú de desbordamiento para distinguirla claramente del fondo contra el que se encuentra.
Íconos de herramientas/acciones: se puede agregar iconografía a los elementos de la lista del menú de desbordamiento, proporcionando una indicación rápida y clara de la funcionalidad asociada.
Rótulos de herramientas: los elementos de la lista del menú de desbordamiento se rotulan de acuerdo con las directrices del menú desplegable de Jutro.
Ícono de puntos suspensivos: el menú de desbordamiento de navegación superior se indica con un ícono de puntos suspensivos que siempre aparece en el lado derecho de una franja de navegación superior.
Menú desplegable: el menú de desbordamiento consta de una lista de enlaces de navegación superiores adicionales.
Sombra del menú desplegable: se utiliza una sombra como parte del menú de desbordamiento para distinguirla claramente del fondo contra el que se encuentra.
Coloque siempre el ícono del menú de desbordamiento (puntos suspensivos) al final de un objeto (cuando el inicio/final esté a la izquierda/derecha estará en el lado derecho), para indicar contenido/funcionalidad adicional.
Utilice menús de desbordamiento para mantener limpias las interfaces de usuario ocultando las opciones secundarias en un menú expandible o, alternativamente, para mostrar las acciones importantes en términos de participación.
Asegúrese de incluir solo aquellas acciones que son necesarias para completar las tareas prioritarias y que son contextualmente relevantes y enumérelas en orden de frecuencia de uso.
Utilice los menús de desbordamiento para contener elementos de menú o acciones adicionales a medida que se agregan de forma gradual/progresiva a la interfaz de usuario.
No utilice menús en cascada.
Deshabilite las opciones que no son relevantes en un contexto determinado.
Un símbolo de puntos suspensivos del menú de desbordamiento se resalta cuando se pasa el cursor sobre él, lo que indica interactividad.
Un símbolo de menú de desbordamiento (puntos suspensivos) puede ser invisible hasta que se coloque el cursor encima de un objeto asociado o se haga clic en él, por ejemplo, una fila de tabla, lo que ayuda a llamar la atención sobre la inclusión del objeto y la funcionalidad del menú de desbordamiento.
Al hacer clic en el símbolo de puntos suspensivos del menú de desbordamiento, se producirá un menú desplegable de contenido; al hacer clic fuera del menú en cualquier lugar, el menú desaparecerá
Los elementos del menú de desbordamiento aparecerán resaltados con un fondo azul cuando se desplace sobre ellos; un solo clic del mouse activará la acción o el enlace del menú.
El componente de menú de desbordamiento forma parte del menú de navegación y, como tal, incluye el rol “menuitem”. El rol WAI-ARIA de aria-expanded="false' indica que su estado predeterminado está contraído y tiene contenido adicional en él. Este valor cambia a true cuando se expande el menú de desbordamiento.
Aspectos que deben tenerse en cuenta sobre la redacción de UX
El texto dentro de un menú adicional debe ser directo y conciso para que los usuarios puedan decidir rápidamente una acción.
Para las acciones que podrían causar un cambio significativo en los datos de los usuarios, considere usar una regla horizontal para separar esa acción y enumerarla debajo del conjunto principal de acciones.
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
El elemento se puede operar con teclado, así como con mouse.
Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
The function must return a React Element that represents the trigger element for the menu, for example a Button as used in the examples. The trigger element must take at least three arguments: an object of props for the component; an onClick callback function; and a Boolean variable to control the state of visibility, like isVisible.
Props to pass to the render trigger element. The CustomProps type depends on what other components might be wrapping DropdownMenu. The DropdownMenuTriggerProps are defined in the 'Show object details' section.
Function that runs when menu is opened or closed. The function has an optional argument named open that is a boolean which is true if the menu is being opened.
DropdownMenu Los componentes utilizan DropdownMenuHeader, DropdownMenuLink y DropdownMenuSeparator como componentes secundarios. Las propiedades de estos componentes son las siguientes:
Los menús de desbordamiento se renderizan mediante el uso del componente DropdownMenu. La propiedad renderTrigger determina el componente como se renderiza DropdownMenu.
Cuando el usuario activa el componente, este renderiza un árbol de cualquiera de los siguientes:
DropdownMenuLink
DropdownMenuSeparator
DropdownMenuHeader
Consulte la sección Uso para obtener detalles sobre cómo diseñar un menú de desbordamiento correctamente y las diferentes opciones de configuración que ofrecemos.
En el siguiente ejemplo, se muestra cómo crear un componente DropdownMenu simple. La propiedad renderTrigger define un botón que abre el menú cuando se hace clic en él.
<DropdownMenu id="dropdown-menu" renderTrigger={( { id, menuId, ref, 'aria-haspopup': ariaHasPopup, 'aria-expanded': ariaExpanded, title ='Menu', onKeyDown, }, toggleMenu )=>{ return( <Button id={id} ref={ref} aria-expanded={ariaExpanded} aria-controls={menuId} aria-haspopup={ariaHasPopup} onClick={()=>toggleMenu()} onKeyDown={onKeyDown} label={title} /> ); }}> <DropdownMenuLink>First menu item</DropdownMenuLink> <DropdownMenuLink>Second menu item</DropdownMenuLink> <DropdownMenuLink>Third menu item</DropdownMenuLink> </DropdownMenu>
