Menu

Componente de menú de navegación para mostrar elementos de navegación jerárquicos.

Importar

import { Menu } from 'asterui'

Ejemplos

Menu Básico

Menú vertical simple con elementos seleccionables.

</>

• Dashboard
• Projects
• Team
• Settings

import { Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('dashboard')
  
  return (
      <Menu selectedKeys={[selected]} onSelect={setSelected}>
        <Menu.Item key="dashboard">Dashboard</Menu.Item>
        <Menu.Item key="projects">Projects</Menu.Item>
        <Menu.Item key="team">Team</Menu.Item>
        <Menu.Item key="settings">Settings</Menu.Item>
      </Menu>
    )
}

export default App

Menu Horizontal

Menú mostrado horizontalmente.

</>

• Home
• About
• Services
• Contact

import { Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('home')
  
  return (
      <Menu mode="horizontal" selectedKeys={[selected]} onSelect={setSelected}>
        <Menu.Item key="home">Home</Menu.Item>
        <Menu.Item key="about">About</Menu.Item>
        <Menu.Item key="services">Services</Menu.Item>
        <Menu.Item key="contact">Contact</Menu.Item>
      </Menu>
    )
}

export default App

Con Iconos

Elementos de menú con iconos para mejor contexto visual.

</>

• Dashboard
• Projects
• Team
• Settings

import { Menu } from 'asterui'
import { HomeIcon, FolderIcon, UsersIcon, Cog6ToothIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('dashboard')
  
  return (
      <Menu selectedKeys={[selected]} onSelect={setSelected}>
        <Menu.Item key="dashboard" icon={<HomeIcon />}>
          Dashboard
        </Menu.Item>
        <Menu.Item key="projects" icon={<FolderIcon />}>
          Projects
        </Menu.Item>
        <Menu.Item key="team" icon={<UsersIcon />}>
          Team
        </Menu.Item>
        <Menu.Item key="settings" icon={<Cog6ToothIcon />}>
          Settings
        </Menu.Item>
      </Menu>
    )
}

export default App

Con Submenú

Menú con submenús anidados.

</>

• Dashboard
• Projects

  • Active Projects
  • Archived
  • Templates
• Team

  • Members
  • Roles
  • Permissions
• Admin
• Settings
• Billing

import { Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('dashboard')
  
  return (
      <Menu selectedKeys={[selected]} onSelect={setSelected} defaultOpenKeys={['projects']}>
        <Menu.Item key="dashboard">Dashboard</Menu.Item>
        <Menu.SubMenu key="projects" label="Projects">
          <Menu.Item key="active">Active Projects</Menu.Item>
          <Menu.Item key="archived">Archived</Menu.Item>
          <Menu.Item key="templates">Templates</Menu.Item>
        </Menu.SubMenu>
        <Menu.SubMenu key="team" label="Team">
          <Menu.Item key="members">Members</Menu.Item>
          <Menu.Item key="roles">Roles</Menu.Item>
          <Menu.Item key="permissions">Permissions</Menu.Item>
        </Menu.SubMenu>
        <Menu.Divider />
        <Menu.Title>Admin</Menu.Title>
        <Menu.Item key="admin-settings">Settings</Menu.Item>
        <Menu.Item key="billing">Billing</Menu.Item>
      </Menu>
    )
}

export default App

Tamaños

Menú en diferentes tamaños.

</>

Extra Small

• Dashboard
• Projects
• Team

Small

• Dashboard
• Projects
• Team

Medium

• Dashboard
• Projects
• Team

Large

• Dashboard
• Projects
• Team

import { Menu, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <div>
          <div className="text-sm font-semibold mb-2">Extra Small</div>
          <Menu size="xs" defaultSelectedKeys={['dashboard']}>
            <Menu.Item key="dashboard">Dashboard</Menu.Item>
            <Menu.Item key="projects">Projects</Menu.Item>
            <Menu.Item key="team">Team</Menu.Item>
          </Menu>
        </div>
  
        <div>
          <div className="text-sm font-semibold mb-2">Small</div>
          <Menu size="sm" defaultSelectedKeys={['dashboard']}>
            <Menu.Item key="dashboard">Dashboard</Menu.Item>
            <Menu.Item key="projects">Projects</Menu.Item>
            <Menu.Item key="team">Team</Menu.Item>
          </Menu>
        </div>
  
        <div>
          <div className="text-sm font-semibold mb-2">Medium</div>
          <Menu size="md" defaultSelectedKeys={['dashboard']}>
            <Menu.Item key="dashboard">Dashboard</Menu.Item>
            <Menu.Item key="projects">Projects</Menu.Item>
            <Menu.Item key="team">Team</Menu.Item>
          </Menu>
        </div>
  
        <div>
          <div className="text-sm font-semibold mb-2">Large</div>
          <Menu size="lg" defaultSelectedKeys={['dashboard']}>
            <Menu.Item key="dashboard">Dashboard</Menu.Item>
            <Menu.Item key="projects">Projects</Menu.Item>
            <Menu.Item key="team">Team</Menu.Item>
          </Menu>
        </div>
      </Space>
    )
}

export default App

Patrón Basado en Datos

Usa la prop items para menús basados en datos.

</>

• Dashboard
• Projects

  • Active Projects
  • Archived
• Admin
• Settings

import { Menu, notification } from 'asterui'
import { HomeIcon, FolderIcon, Cog6ToothIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('dashboard')
  
  const items = [
    { key: 'dashboard', label: 'Dashboard', icon: <HomeIcon /> },
    { key: 'projects', label: 'Projects', icon: <FolderIcon />, children: [
      { key: 'active', label: 'Active Projects' },
      { key: 'archived', label: 'Archived' },
    ]},
    { key: 'divider1', divider: true },
    { key: 'admin', label: 'Admin', title: true },
    { key: 'settings', label: 'Settings', icon: <Cog6ToothIcon /> },
  ]
  
  return (
      <Menu
        items={items}
        selectedKeys={[selected]}
        onSelect={(key) => {
          setSelected(key)
          notification.info({ message: `Selected: ${key}` })
        }}
      />
    )
}

export default App

API

Menu

Propiedad	Descripción	Tipo	Predeterminado
children	Elementos del menú (patrón compuesto)	React.ReactNode	-
items	Elementos del menú (patrón basado en datos)	MenuItem[]	-
mode	Modo de visualización del menú	'vertical' | 'horizontal' | 'inline'	'vertical'
size	Tamaño del menú	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
selectedKeys	Claves de elementos seleccionados controlados	string[]	-
defaultSelectedKeys	Claves seleccionadas predeterminadas (no controlado)	string[]	[]
openKeys	Claves de submenú abierto controladas	string[]	-
defaultOpenKeys	Claves de submenú abierto predeterminadas (no controlado)	string[]	[]
onSelect	Callback cuando se selecciona un elemento	(key: string) => void	-
onOpenChange	Callback cuando cambia el estado abierto del submenú	(openKeys: string[]) => void	-
className	Clases CSS adicionales	string	-

MenuItem (para la prop items)

Propiedad	Descripción	Tipo	Predeterminado
key	Identificador único	string	-
label	Etiqueta del elemento	React.ReactNode	-
icon	Elemento de icono	React.ReactNode	-
disabled	Si el elemento está deshabilitado	boolean	false
children	Elementos del submenú	MenuItem[]	-
divider	Renderizar como divisor	boolean	false
title	Renderizar como título de sección	boolean	false

Menu.Item (patrón compuesto)

Propiedad	Descripción	Tipo	Predeterminado
key	Clave única para selección (prop key de React)	string	-
children	Contenido del elemento	React.ReactNode	-
icon	Elemento de icono	React.ReactNode	-
disabled	Si el elemento está deshabilitado	boolean	false
onClick	Manejador de clic	() => void	-
className	Clases CSS adicionales	string	-

Menu.SubMenu (patrón compuesto)

Propiedad	Descripción	Tipo	Predeterminado
key	Clave única para estado abierto (prop key de React)	string	-
label	Etiqueta del submenú	React.ReactNode	-
icon	Elemento de icono	React.ReactNode	-
disabled	Si el submenú está deshabilitado	boolean	false
children	Elementos del submenú	React.ReactNode	-
className	Clases CSS adicionales	string	-

Menu.Title

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido del título	React.ReactNode	-
className	Clases CSS adicionales	string	-

Menu.Divider

Propiedad	Descripción	Tipo	Predeterminado
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa patrones de navegación semánticos con atributos ARIA apropiados
• Soporte de navegación por teclado con teclas de flecha para recorrido del menú
• Los elementos seleccionados están marcados apropiadamente para lectores de pantalla
• Los estados abierto/cerrado de submenú se comunican a tecnologías asistivas
• Los elementos de menú deshabilitados están marcados apropiadamente y no son enfocables
• Los estados de enfoque son visibles para navegación por teclado