Menu

Overview

Menus appear when users interact with a menu activator button. Use menus for secondary actions or options that don't require immediate access.

<button daff-button color="theme" [daffMenuActivator]="menu">
  Account
</button>

Best practices

When to use

• Displaying a list of actions that don't need to be visible at all times
• Providing secondary or contextual options
• Creating dropdown navigation

When not to use

• Actions need to be immediately visible and accessible
• There are only one or two actions (consider using buttons instead)

Usage

Import DAFF_MENU_COMPONENTS into your component:

import { DAFF_MENU_COMPONENTS } from '@daffodil/design/menu';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_MENU_COMPONENTS,
  ],
})
export class CustomComponent {}

Deprecation notice:

DaffMenuModule is deprecated. Use the standalone component imports instead.

Anatomy

A menu is composed of an activator, a container, and one or more items:

<button [daffMenuActivator]="actionsMenu">
  Actions
</button>

<ng-template #actionsMenu>
  <daff-menu>
    <button daff-menu-item>
      <fa-icon [icon]="faEdit" daffPrefix></fa-icon>
      Edit
    </button>
    <button daff-menu-item>
      <fa-icon [icon]="faTrash" daffPrefix></fa-icon>
      Delete
    </button>
    <a href="/settings" daff-menu-item>
      <fa-icon [icon]="faCog" daffPrefix></fa-icon>
      Settings
    </a>
  </daff-menu>
</ng-template>

• [daffMenuActivator]: A directive attached to a button that triggers the menu to open. The selector doubles as an input for the menu content to display.
• <daff-menu>: The container component that holds all menu items.
• <daff-menu-item>: A single action or navigation item within the menu. Use with an anchor or button element.
• [daffPrefix]: Adds a decorative icon before the menu item content.

Features

Menu state

Use the actiavtor's isOpen property to track whether the menu is currently open or closed. Use this to update your UI based on the menu state, such as changing icons or styling.

<button
  daff-button
  color="theme"
  [daffMenuActivator]="menuContent"
  #activator="daffMenuActivator"
>
  Account
  <fa-icon
    daffSuffix
    size="sm"
    [icon]="activator.isOpen() ? faChevronUp : faChevronDown"
  ></fa-icon>
</button>

Custom IDs

Menus generate a unique id automatically. To set your own, add an id to the activator and the menu becomes {id}-menu.

<button
  daff-button
  color="theme"
  [daffMenuActivator]="menu"
  id="menu-with-id">
  Account
</button>

Accessibility

Menu follows the Menu and Menubar WAI-ARIA design pattern.

Daffodil provides

• role="menu" and role="menuitem" on appropriate elements
• Focus management when menu opens and closes
• aria-expanded on the activator indicating the menu state

Developer responsibilities

• Provide a meaningful label on the menu activator
• Ensure menu items have descriptive text or labels
• Use appropriate HTML elements (<button> for actions, <a> for navigation)

Keyboard interactions

Keyboard focus is placed on the first item when a menu is opened.