Overview

Import the component and the two directives. The trigger is a directive rather than a component of its own — the same decision as [gogButton] — because a menu button is usually an icon button you have already styled, and a wrapper would fight that.

import {
  MenuComponent,
  GogMenuTriggerDirective,
  GogMenuItemDirective,
} from '@guildofgleks/ui';

@Component({
  // ...
  imports: [MenuComponent, GogMenuTriggerDirective, GogMenuItemDirective],
})

<div class="menu-row">
  <gog-button variant="outline" type="button" [gogMenuTrigger]="documentMenu">
    Document actions
  </gog-button>

  <gog-menu #documentMenu ariaLabel="Document actions" (gogClosed)="closes.set(closes() + 1)">
    <button gogMenuItem type="button" (click)="run('Rename')">
      <gog-icon name="pencil" />
      Rename
    </button>
    <button gogMenuItem type="button" (click)="run('Duplicate')">
      <gog-icon name="copy" />
      Duplicate
    </button>
    <button gogMenuItem type="button" disabled>
      <gog-icon name="lock" />
      Transfer ownership
    </button>
    <button gogMenuItem type="button" (click)="run('Delete')">
      <gog-icon name="trash" />
      Delete
    </button>
  </gog-menu>
</div>

<p class="menu-status">
  Last action: <strong>{{ lastAction() }}</strong> · closes: <strong>{{ closes() }}</strong>
</p>

There is no appendToBody. The panel always renders into <body> and is placed from the trigger's measured rect, so a menu inside gog-scroll, gog-table or any overflow: hidden ancestor is not clipped and needs nothing configured. It also takes the --gog-dropdown-z its trigger inherits, so a menu opened inside a gog-dialog stacks above the dialog rather than behind it.

Keyboard

The WAI-ARIA menu button pattern, in full. This is most of what the component is for — none of it is visible in a screenshot, and it is the part a hand-rolled dropdown almost always leaves out. Open the demo above and try it.

Key	What it does
`Enter / Space / ArrowDown`	Opens the menu with the first item focused.
`ArrowUp`	Opens the menu with the last item focused.
`ArrowDown / ArrowUp`	Moves between items and wraps at the ends. Disabled items are stepped over.
`Home / End`	Jumps to the first / last item that is not disabled.
`Escape`	Closes and returns focus to the trigger.
`Tab`	Closes and lets focus move on to the next element in the page.

A press outside closes the menu without pulling focus back — the click landed somewhere the reader chose, and stealing focus from it would undo their own action.

Examples

Row actions

What the component was built for: an icon button per row. The library created this gap itself — 21.4.0 added the more-horizontal / more-vertical icons and a table built for row actions, with nothing to open with them. The table wraps itself in a gog-scroll and the panel still escapes it, which is why the menu always renders into <body> rather than offering a mode to get this wrong in.

#	Document	Owner
1	Q3 roadmap	Ada
2	Design tokens	Grace
3	Release notes	Linus

<gog-table [value]="documents" size="sm">
  <gog-column field="name" header="Document"></gog-column>
  <gog-column field="owner" header="Owner"></gog-column>
  <!-- A real header rather than an empty one: gog-column falls back to the field name when
       `header` is blank, so `header=""` on a field="id" column renders "ID" above a menu button. -->
  <gog-column field="id" header="Actions" width="88px">
    <ng-template gogColumnBody let-row>
      <span class="row-actions">
        <button
          gogButton
          variant="ghost"
          size="sm"
          type="button"
          [gogMenuTrigger]="rowMenu"
          [attr.aria-label]="'Actions for ' + $any(row).name"
        >
          <gog-icon name="more-vertical" />
        </button>

        <gog-menu #rowMenu ariaLabel="Row actions">
          <button gogMenuItem type="button" (click)="run('Open ' + $any(row).name)">
            <gog-icon name="eye" />
            Open
          </button>
          <button gogMenuItem type="button" (click)="run('Share ' + $any(row).name)">
            <gog-icon name="external-link" />
            Share
          </button>
          <button gogMenuItem type="button" disabled>
            <gog-icon name="lock" />
            Transfer ownership
          </button>
          <button gogMenuItem type="button" (click)="run('Archive ' + $any(row).name)">
            <gog-icon name="download" />
            Archive
          </button>
        </gog-menu>
      </span>
    </ng-template>
  </gog-column>
</gog-table>

<p class="menu-status">
  Last action: <strong>{{ lastAction() }}</strong>
</p>

Disabled items

An item is your own <button>, so you disable it the way you disable a button: the native disabled attribute, static or bound — there is no input for it. A disabled item stays in the list rather than disappearing, since removing it would shift every other item under the pointer; the arrow keys step over it, and clicking it does nothing. With Locked on, the second menu leaves only Open reachable, and ↓ from it wraps back to itself instead of landing on a dead command.

<div class="menu-row">
  <gog-button variant="outline" type="button" [gogMenuTrigger]="staticMenu">
    Statically disabled
  </gog-button>
  <gog-menu #staticMenu ariaLabel="Statically disabled items">
    <button gogMenuItem type="button" (click)="run('Publish')">Publish</button>
    <button gogMenuItem type="button" disabled>Publish to production</button>
    <button gogMenuItem type="button" disabled>Delete permanently</button>
    <button gogMenuItem type="button" (click)="run('Duplicate')">Duplicate</button>
  </gog-menu>

  <gog-button variant="outline" type="button" [gogMenuTrigger]="boundMenu">
    Bound to state
  </gog-button>
  <gog-menu #boundMenu ariaLabel="Items disabled by state">
    <button gogMenuItem type="button" (click)="run('Open')">Open</button>
    <button gogMenuItem type="button" [disabled]="isLocked()" (click)="run('Edit')">Edit</button>
    <button gogMenuItem type="button" [disabled]="isLocked()" (click)="run('Delete')">
      Delete
    </button>
  </gog-menu>

  <gog-toggle label="Locked" size="sm" [(checked)]="isLocked" />
</div>

<p class="menu-status">
  Last action: <strong>{{ lastAction() }}</strong>
</p>

A long menu scrolls itself

The panel's height is the smallest of three: its own content, --gog-menu-max-height (320px by default), and the room between the trigger and the viewport edge. Past that it scrolls with gog-scroll — the same thin, auto-hiding scroller as everywhere else in the package, with overscrollBehavior="contain" so a wheel at the end of the list does not scroll the page behind it. Arrowing past the last visible item scrolls it into view.

Lower the token to make a menu start scrolling sooner — that is the knob, and it is the one thing about this component that did not work in 21.5.0 21.5.1: the measured room was written onto the panel as an inline max-height, which beat the rule the token feeds.

<div class="menu-row">
  <gog-button variant="outline" type="button" [gogMenuTrigger]="branchMenu">
    Move to branch…
  </gog-button>
  <gog-menu #branchMenu ariaLabel="Move to branch">
    @for (branch of branches; track branch) {
      <button gogMenuItem type="button" (click)="moved.set(branch)">{{ branch }}</button>
    }
  </gog-menu>
</div>

<p class="menu-status">
  Moved to: <strong>{{ moved() }}</strong>
</p>

Direction

direction is auto by default: the panel drops down whenever it fits and flips up only when it cannot. Force it with up or down.

<div class="menu-row">
  <gog-button variant="outline" size="sm" type="button" [gogMenuTrigger]="autoMenu">
    auto
  </gog-button>
  <gog-menu #autoMenu ariaLabel="Auto direction">
    <button gogMenuItem type="button" (click)="picked.set('auto')">Item</button>
    <button gogMenuItem type="button" (click)="picked.set('auto')">Item</button>
  </gog-menu>

  <gog-button variant="outline" size="sm" type="button" [gogMenuTrigger]="downMenu">
    down
  </gog-button>
  <gog-menu #downMenu direction="down" ariaLabel="Downwards menu">
    <button gogMenuItem type="button" (click)="picked.set('down')">Item</button>
    <button gogMenuItem type="button" (click)="picked.set('down')">Item</button>
  </gog-menu>

  <gog-button variant="outline" size="sm" type="button" [gogMenuTrigger]="upMenu">up</gog-button>
  <gog-menu #upMenu direction="up" ariaLabel="Upwards menu">
    <button gogMenuItem type="button" (click)="picked.set('up')">Item</button>
    <button gogMenuItem type="button" (click)="picked.set('up')">Item</button>
  </gog-menu>
</div>

<p class="menu-status">
  Picked from: <strong>{{ picked() }}</strong>
</p>

API Reference

Inputs — `gog-menu`

Name	Type	Default	Description
`direction`21.5.0	`'auto' \| 'up' \| 'down'`	`'auto'`	'auto' drops the panel down whenever it fits and flips it up only when it cannot — unlike a dropdown's listbox, which takes whichever side has more room.
`ariaLabel`21.5.0	`string`	`''`	Names the panel itself, announced when the menu opens. The trigger keeps its own accessible name — usually an aria-label, since a row-actions trigger is an icon button with no text.

Outputs

Name	Payload	Description
`gogClosed`	`void`	Fires after every close, whatever caused it — an item, Escape, Tab, or a click outside.

Methods, for driving it yourself

Name	Description
`open(trigger: HTMLElement, focus?: 'first' \| 'last')`	Opens anchored to that element, focusing the first item — or the last.
`close(restoreFocus = true)`	Closes and, unless told otherwise, returns focus to the trigger.
`toggle(trigger: HTMLElement)`	What the trigger directive calls.
`isOpenFrom(trigger: HTMLElement)`	True while that element is the one the menu is currently open from.
`isOpen`	A signal, true while the panel is rendered.

Directives

Selector	Goes on	Description
`[gogMenuTrigger]`	your own button	Takes the menu to open — `<gog-menu #rowMenu>` plus `[gogMenuTrigger]="rowMenu"`. Required.
`gogMenuItem`	your own buttons, inside the menu	Marks an item so the panel can find it for roving focus. No inputs — an item's label, icon and disabled state are all just the button's own.

Styling Tokens

Every CSS custom property the menu paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.

Token	Description
`--gog-menu-z`	Stacking order of the portaled panel. Defaults to --gog-dropdown-z, and the panel takes the value its trigger inherits — which is how a menu opened inside a dialog stacks above it.
`--gog-menu-bg`	Panel background.
`--gog-menu-border-color / -border-width / -border-style`	Panel border.
`--gog-menu-radius`	Panel corner radius.
`--gog-menu-shadow`	Panel shadow. Defaults to the dialog's.
`--gog-menu-font-family`	Panel font family.
`--gog-menu-padding`	Space between the panel edge and its items.
`--gog-menu-gap`	Space between items.
`--gog-menu-offset`	Gap between the trigger and the panel.
`--gog-menu-min-width / -max-width`	Panel width bounds. The panel sizes to its widest item between them, never to the trigger.
`--gog-menu-max-height`	Height past which the panel scrolls itself with gog-scroll instead of growing. The panel takes the smallest of this, its own content, and the room between its trigger and the viewport edge.
`--gog-menu-available-height`	Instance-layer (undeclared): written by the component from the room it measured beside the trigger. Listed because it is the other half of the min() above, not because you would set it.
`--gog-menu-transition-duration`	Open/close transition.
`--gog-menu-focus-ring / -focus-ring-width`	Focus ring on the item the arrow keys landed on.
`--gog-menu-item-color / -hover-bg / -hover-color`	Item foreground, and the pair it swaps to under the pointer or focus.
`--gog-menu-item-font-size / -line-height / -padding / -radius`	Item metrics.
`--gog-menu-item-gap`	Space between an item's icon and its label.
`--gog-menu-item-icon-size`	Size of an icon projected into an item, relative to the item's own text.
`--gog-menu-item-disabled-opacity / -disabled-color`	How a disabled item reads. It stays in the list rather than disappearing.