Menú de opciones

Menú de opciones en Storybook

Note: Este componente debe utilizarse solo bajo el ámbito de los patrones de UX del encabezado y no se debe utilizar en situaciones aisladas o personalizadas.

Para obtener documentación sobre el componente menú de opciones para patrones de UX de composición y disposición de página, consulte esta página.

Uso

Descripción general

El componente menú de opciones reemplaza al encabezado global estándar y a la navegación en dispositivos móviles y tablets o bajo demanda cambiando su configuración.

Anatomía

El componente menú de opciones consta de los siguientes elementos:

1. Ícono de botón de menú de opciones: Se utiliza para abrir la navegación del producto.
2. Contenedor de menú de opciones: Organiza los elementos de navegación y otro contenido que no sea fundamental para el objetivo inmediato del usuario, como la configuración y la ayuda.
3. Ícono de botón Cerrar: Cierra el menú de opciones.
4. Campo de entrada de búsqueda: Permite a los usuarios realizar una búsqueda.
5. Navegación de la aplicación: Elementos de menú y elementos de navegación que los usuarios pueden seleccionar.
6. Conmutador de aplicaciones: Permite a los usuarios cambiar de aplicación.
7. Avatar de usuario: Incluye el nombre completo del usuario y los enlaces del avatar.
8. Encabezado global: Incluye el ícono de campana de notificaciones.

Prácticas recomendadas

• El menú de opciones debe mostrarse en lugar de la navegación de escritorio en dispositivos móviles y tablets.
• Use el menú de hamburguesa para los elementos de navegación que no sirven directamente al objetivo de su aplicación. Esto ayuda a centrar la atención del usuario en la tarea principal.

Capacidad de ser responsive/adaptabilidad

El menú de opciones tiene un ancho fijo.

Interacciones

1. Al hacer clic en el ícono del menú de opciones, se activa un panel de navegación que se puede contraer. Los usuarios pueden desestimar el menú de opciones haciendo clic en el ícono del botón X de cierre.
2. Los usuarios pueden navegar dentro de la aplicación haciendo clic en los enlaces de los elementos del menú.
3. Los usuarios pueden cambiar entre aplicaciones haciendo clic en el conmutador de aplicaciones, que abre un menú desplegable con una lista de aplicaciones.
4. Los usuarios pueden mostrar notificaciones haciendo clic en el ícono de campana de notificaciones.

Aspectos que deben tenerse en cuenta sobre la redacción de UX

• Los rótulos de los menús y los elementos del menú deben ser precisas e informativas.
• Escriba rótulos que sean concisas y comuniquen claramente el propósito de la selección.
• La mayoría de los enlaces deben ser sustantivos. Por ejemplo, la página Perfil del usuario.
• Cada elemento del menú debe aparecer como una sola línea de texto.
• En la mayoría de los casos, use mayúscula inicial como se usa en las oraciones, incluidos los encabezados y títulos, los nombres y elementos de menú y los elementos de navegación. Brinda un estilo amigable y conversacional, y es más fácil de traducir para mercados y productos que no son de EE. UU. Las excepciones serán los sustantivos propios y nombres de personas.

Código

Demostración de ejemplo básico en Storybook .

<Header>
  <BurgerMenu
    burgerContent={[
      <BurgerMenuItem
        key="item"
        id="item"
        isContainerOnly>
        Menu Item
      </BurgerMenuItem>,
      <BurgerMenuLink
        key="link"
        id="link">
        Menu Link
      </BurgerMenuLink>,
    ]}
  />
</Header>

Instrucción de importación

import { BurgerMenu, BurgerMenuItem, BurgerMenuLink } from '@jutro/router';

Contrato de componentes

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.

Propiedades

Propiedades del menú de opciones

burgerContent

Tipo

node[]

Descripción

Elements to render in the sidebar.

buttonClassName

Tipo

string

Descripción

An optional CSS class for the burger menu button.

className

Tipo

string

Descripción

CSS class name for this component.

closeOnItemClick

Tipo

bool

Descripción

If set to true, clicking items on the burger menu which does not change browser location will cause the menu to close. This can be overwritten per item by setting a closeOnClick property on it. Note that if an item changes browser location, the menu will always be closed.

separatorClassName

Tipo

string

Descripción

An optional CSS class for the burger sidebar separator.

Propiedades de elementos del menú de opciones

idobligatorio

Tipo

string

Descripción

Unique identifier for the component.

className

Tipo

string

Descripción

CSS class name for this component.

closeOnClick

Tipo

boolean

Descripción

If set to true, clicking this item will close the burger menu. Note that if an item changes browser location, the menu will always be closed.

hideSeparator

Tipo

boolean

Descripción

If set to true, it will not render a separator.

isContainerOnly

Tipo

boolean

Descripción

If set to true, the item will be rendered without 'interactive item' styling. This does not affect any attached event handlers.

separatorClassName

Tipo

string

Descripción

The CSS class name for the menu item separator.

separatorClassName

Tipo

React.ElementType

Descripción

The HTML tag which will be used to render item.

Valor predeterminado

div

Propiedades de enlaces del menú de opciones

idobligatorio

Tipo

string

Descripción

Unique identifier for the component.

children

Tipo

React.ReactNode

Descripción

The content of the item.

hideSeparator

Tipo

boolean

Descripción

If set to true, it will not render a separator.

seperatorClassName

Tipo

string

Descripción

An optional CSS class for the burger sidebar item separator.

Ganchos

No hay ganchos para Menú de opciones.

Claves de traducción

Hay tres claves de traducción asociadas al componente menú de opciones:

Clave	Se usa para
jutro-router.BurgerMenu.Open Menu	Valor aria-label para el botón de menú Abrir
jutro-router.BurgerMenu.Menu header title	Valor aria-label para el título del encabezado
jutro-router.BurgerMenu.Close navigation	Valor aria-label para el botón Cerrar navegación

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar un menú de opciones correctamente y las diferentes opciones de configuración que ofrecemos.

Menú de opciones básico

Un menú de opciones básico es un botón dentro de un encabezado que se puede usar para abrir un menú. El menú está definido por la propiedad burgerContent, que puede contener una matriz de nodos. Hay componentes específicos para elementos de menú de opciones como BurgerMenuItem y BurgerMenuLink que se pueden usar en la matriz burgerContent.

Demostración de ejemplo básico en Storybook .

<Header>
  <BurgerMenu
    burgerContent={[
      <BurgerMenuItem
        key="item"
        id="item"
        isContainerOnly>
        Menu Item
      </BurgerMenuItem>,
      <BurgerMenuLink
        key="link"
        id="link">
        Menu Link
      </BurgerMenuLink>,
    ]}
  />
</Header>

Registro de cambios