Guides approfondis
Angular Aria

Menubar

Vue d'ensemble

La menubar est une barre de navigation horizontale qui donne un accès permanent aux menus de l'application. Les menubars organisent les commandes en catégories logiques comme Fichier, Édition et Affichage, ce qui aide les utilisateurs à découvrir et à exécuter les fonctionnalités de l'application au clavier ou à la souris.

Utilisation

Les menubars conviennent bien pour organiser les commandes d'une application dans une navigation permanente et facile à découvrir.

Utilisez une menubar pour :

  • Construire des barres de commandes d'application (comme Fichier, Édition, Affichage, Insertion, Format)
  • Créer une navigation permanente qui reste visible dans toute l'interface
  • Organiser les commandes en catégories logiques de premier niveau
  • Obtenir une navigation horizontale dans les menus avec prise en charge du clavier
  • Construire des interfaces d'application de type bureau

Évitez les menubars pour :

  • Construire des menus déroulants pour des actions individuelles (utilisez plutôt un menu avec déclencheur)
  • Créer des menus contextuels (utilisez le pattern du guide Menu)
  • De simples listes d'actions standalone (utilisez plutôt un menu)
  • Les interfaces mobiles où l'espace horizontal est limité
  • Une navigation qui relève d'un pattern de barre latérale ou d'en-tête

Fonctionnalités

  • Navigation horizontale - Les touches fléchées gauche/droite permettent de passer d'une catégorie de premier niveau à l'autre
  • Visibilité permanente - Toujours visible, ni modale ni masquable
  • Ouverture au survol - Les sous-menus s'ouvrent au survol après une première interaction au clavier ou au clic
  • Sous-menus imbriqués - Prise en charge de plusieurs niveaux de profondeur de menu
  • Navigation au clavier - Touches fléchées, Entrée/Espace, Échap et recherche par saisie (typeahead)
  • États désactivés - Désactivez la menubar entière ou des éléments individuels
  • Prise en charge du RTL - Navigation automatique pour les langues de droite à gauche

Exemples

Menubar simple

Une menubar donne un accès permanent aux commandes de l'application, organisées en catégories de premier niveau. Les utilisateurs naviguent entre les catégories avec les flèches gauche/droite et ouvrent les menus avec Entrée ou la flèche bas.

Appuyez sur la flèche droite pour passer de Fichier à Édition puis à Affichage. Appuyez sur Entrée ou sur la flèche bas pour ouvrir un menu, puis parcourez les éléments du sous-menu avec les flèches haut/bas.

Éléments de menubar désactivés

Désactivez des éléments de menu spécifiques ou la menubar entière pour empêcher toute interaction. Contrôlez si les éléments désactivés peuvent recevoir le focus clavier avec l'input softDisabled.

Avec [softDisabled]="true" sur la menubar, les éléments désactivés peuvent recevoir le focus mais ne peuvent pas être activés. Avec [softDisabled]="false", les éléments désactivés sont ignorés pendant la navigation au clavier.

Prise en charge du RTL

Les menubars s'adaptent automatiquement aux langues de droite à gauche (RTL). La navigation avec les touches fléchées s'inverse et les sous-menus se positionnent sur le côté gauche.

L'attribut dir="rtl" active le mode RTL. La flèche gauche déplace vers la droite et la flèche droite vers la gauche, ce qui préserve une navigation naturelle pour les utilisateurs de langues RTL.

Tests

Angular Aria fournit des harnais de composant pour tester les composants menubar. Voici un exemple d'utilisation des harnais dans un test de composant :

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {MenuHarness} from '@angular/aria/menu/testing';
import {MyMenubarComponent} from './my-menubar'; // Your component

describe('MyMenubarComponent', () => {
  let fixture: ComponentFixture<MyMenubarComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [MyMenubarComponent],
    });

    fixture = TestBed.createComponent(MyMenubarComponent);
    await fixture.whenStable();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should interact with menubar items', async () => {
    // Load the menubar harness (which is a MenuHarness with selector '[ngMenuBar]')
    const menubar = await loader.getHarness(MenuHarness.with({selector: '[ngMenuBar]'}));

    // Menubars are persistent and always "open"
    expect(await menubar.isOpen()).toBe(true);
    expect(await menubar.isMenuBar()).toBe(true);

    // Get top-level items
    const items = await menubar.getItems();
    expect(items.length).toBe(2);
    expect(await items[0].getText()).toBe('File');
    expect(await items[1].getText()).toBe('Edit');

    // Click an item to open its dropdown menu
    await items[0].click();

    const fileMenu = await items[0].getSubmenu();
    expect(fileMenu).toBeTruthy();
    expect(await fileMenu!.isOpen()).toBe(true);
  });
});

Référence de l'API

Pour une documentation détaillée de l'API, consultez les références suivantes :