Menu

Componente de menu de navegação para exibir itens de navegação hierárquicos.

Importação

import { Menu } from 'asterui'

Exemplos

Menu Básico

Menu vertical simples com itens selecionáveis.

</>

• 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

Menu exibido 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

Com Ícones

Itens de menu com ícones para melhor 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

Com Submenu

Menu com submenus aninhados.

</>

• 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

Tamanhos

Menu em diferentes tamanhos.

</>

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

Padrão Orientado a Dados

Use prop items para menus orientados a dados.

</>

• 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

Propriedade	Descrição	Tipo	Padrão
children	Itens de menu (padrão composto)	React.ReactNode	-
items	Itens de menu (padrão orientado a dados)	MenuItem[]	-
mode	Modo de exibição do menu	'vertical' | 'horizontal' | 'inline'	'vertical'
size	Tamanho do menu	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
selectedKeys	Chaves de itens selecionados controlados	string[]	-
defaultSelectedKeys	Chaves selecionadas padrão (não controlado)	string[]	[]
openKeys	Chaves de submenu aberto controladas	string[]	-
defaultOpenKeys	Chaves de submenu aberto padrão (não controlado)	string[]	[]
onSelect	Callback quando item é selecionado	(key: string) => void	-
onOpenChange	Callback quando estado aberto de submenu muda	(openKeys: string[]) => void	-
className	Classes CSS adicionais	string	-

MenuItem (para prop items)

Propriedade	Descrição	Tipo	Padrão
key	Identificador único	string	-
label	Rótulo do item	React.ReactNode	-
icon	Elemento de ícone	React.ReactNode	-
disabled	Se o item está desabilitado	boolean	false
children	Itens de submenu	MenuItem[]	-
divider	Renderizar como divisor	boolean	false
title	Renderizar como título de seção	boolean	false

Menu.Item (padrão composto)

Propriedade	Descrição	Tipo	Padrão
key	Chave única para seleção (prop key do React)	string	-
children	Conteúdo do item	React.ReactNode	-
icon	Elemento de ícone	React.ReactNode	-
disabled	Se o item está desabilitado	boolean	false
onClick	Manipulador de clique	() => void	-
className	Classes CSS adicionais	string	-

Menu.SubMenu (padrão composto)

Propriedade	Descrição	Tipo	Padrão
key	Chave única para estado aberto (prop key do React)	string	-
label	Rótulo do submenu	React.ReactNode	-
icon	Elemento de ícone	React.ReactNode	-
disabled	Se o submenu está desabilitado	boolean	false
children	Itens do submenu	React.ReactNode	-
className	Classes CSS adicionais	string	-

Menu.Title

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo do título	React.ReactNode	-
className	Classes CSS adicionais	string	-

Menu.Divider

Propriedade	Descrição	Tipo	Padrão
className	Classes CSS adicionais	string	-

Acessibilidade

• Usa padrões de navegação semânticos com atributos ARIA apropriados
• Suporte de navegação por teclado com teclas de seta para travessia do menu
• Itens selecionados são marcados adequadamente para leitores de tela
• Estados abertos/fechados de submenu são comunicados para tecnologias assistivas
• Itens de menu desabilitados são marcados adequadamente e não são focáveis
• Estados de foco são visíveis para navegação por teclado