Menu

Composant de menu de navigation pour afficher des éléments de navigation hiérarchiques.

Import

import { Menu } from 'asterui'

Exemples

Menu basique

Menu vertical simple avec éléments sélectionnables.

</>

• 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 affiché horizontalement.

</>

• 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

Avec icônes

Éléments de menu avec icônes pour un meilleur contexte visuel.

</>

• 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

Avec sous-menu

Menu avec sous-menus imbriqués.

</>

• 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

Tailles

Menu en différentes tailles.

</>

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

Modèle piloté par les données

Utilisez la prop items pour les menus pilotés par les données.

</>

• 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

Propriété	Description	Type	Par défaut
children	Éléments de menu (modèle composé)	React.ReactNode	-
items	Éléments de menu (modèle piloté par les données)	MenuItem[]	-
mode	Mode d’affichage du menu	'vertical' | 'horizontal' | 'inline'	'vertical'
size	Taille du menu	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
selectedKeys	Clés d’éléments sélectionnés contrôlées	string[]	-
defaultSelectedKeys	Clés sélectionnées par défaut (non contrôlées)	string[]	[]
openKeys	Clés de sous-menu ouvertes contrôlées	string[]	-
defaultOpenKeys	Clés de sous-menu ouvertes par défaut (non contrôlées)	string[]	[]
onSelect	Callback lorsqu’un élément est sélectionné	(key: string) => void	-
onOpenChange	Callback lorsque l’état d’ouverture du sous-menu change	(openKeys: string[]) => void	-
className	Classes CSS supplémentaires	string	-

MenuItem (pour la prop items)

Propriété	Description	Type	Par défaut
key	Identifiant unique	string	-
label	Étiquette de l’élément	React.ReactNode	-
icon	Élément icône	React.ReactNode	-
disabled	Indique si l’élément est désactivé	boolean	false
children	Éléments de sous-menu	MenuItem[]	-
divider	Rendre comme diviseur	boolean	false
title	Rendre comme titre de section	boolean	false

Menu.Item (modèle composé)

Propriété	Description	Type	Par défaut
key	Clé unique pour la sélection (prop key React)	string	-
children	Contenu de l’élément	React.ReactNode	-
icon	Élément icône	React.ReactNode	-
disabled	Indique si l’élément est désactivé	boolean	false
onClick	Gestionnaire de clic	() => void	-
className	Classes CSS supplémentaires	string	-

Menu.SubMenu (modèle composé)

Propriété	Description	Type	Par défaut
key	Clé unique pour l’état d’ouverture (prop key React)	string	-
label	Étiquette du sous-menu	React.ReactNode	-
icon	Élément icône	React.ReactNode	-
disabled	Indique si le sous-menu est désactivé	boolean	false
children	Éléments du sous-menu	React.ReactNode	-
className	Classes CSS supplémentaires	string	-

Menu.Title

Propriété	Description	Type	Par défaut
children	Contenu du titre	React.ReactNode	-
className	Classes CSS supplémentaires	string	-

Menu.Divider

Propriété	Description	Type	Par défaut
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise des modèles de navigation sémantiques avec des attributs ARIA appropriés
• Support de la navigation au clavier avec les touches fléchées pour traverser le menu
• Les éléments sélectionnés sont correctement marqués pour les lecteurs d’écran
• Les états d’ouverture/fermeture des sous-menus sont communiqués aux technologies d’assistance
• Les éléments de menu désactivés sont correctement marqués et non focalisables
• Les états de focus sont visibles pour la navigation au clavier