@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIDropdownTool

    A toolbar command menu — the trigger label is always fixed and the panel lists discrete actions to invoke. Picking an item fires a toolAction event; nothing is "selected" in a persistent sense.

    When to use UIDropdownTool vs UISelectTool:

    UIDropdownTool UISelectTool
    Purpose Execute a command Choose a value
    Trigger label Always fixed (e.g. "Insert") Updates to show current value
    Persistent state None — emits an action value model holds the selection
    Analogy Menu button / split button <select> element

    Use UIDropdownTool for things like an "Insert" menu, a "Format" menu, or any other list of commands the user invokes one at a time. Use UISelectTool when the user needs to pick a value that stays selected (e.g. font size, colour mode).

    Panel items are rendered as an icon grid by default (displayMode="icon-grid"). Switch to displayMode="list" for a traditional menu layout with icon + label per row.

    The panel is rendered via PopoverService (fixed-position, outside the toolbar DOM) so it is never clipped by overflow: hidden ancestors.

    <!-- Command menu (icon-grid, default) -->
    <ui-toolbar (toolAction)="onInsert($event)">
      <ui-dropdown-tool id="insert" label="Insert" [items]="insertItems" />
    </ui-toolbar>

    <!-- Traditional list layout -->
    <ui-dropdown-tool id="format" label="Format" displayMode="list"
      [items]="formatItems" />

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    ariaLabel disabled displayMode icon id itemAction items label selectedItemId tooltip

    Methods

    deactivate emitAction

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label forwarded to the native element as aria-label.

    disabled: InputSignal<boolean> = ...

    Whether this item is disabled.

    displayMode: InputSignal<DropdownToolDisplayMode> = ...

    How items are rendered inside the panel.

    • 'icon-grid' (default) — compact grid of icon-only buttons; labels appear as native tooltips on hover. Best when every item has an icon.
    • 'list' — icon + label in a vertical list (traditional menu style).
    icon: InputSignal<string | undefined> = ...

    SVG inner-content string for an optional icon (use UIIcons.Lucide.*).

    id: InputSignal<string> = ...

    Unique identifier for this toolbar item.

    itemAction: OutputEmitterRef<ToolActionEvent> = ...

    Emitted when the user triggers an action on this item.

    items: InputSignal<DropdownToolItem[]> = ...

    Items to display in the dropdown panel.

    label: InputSignal<string> = ...

    Human-readable label shown in the tool.

    selectedItemId: WritableSignal<string | undefined> = ...

    The id of the most recently triggered dropdown item.

    tooltip: InputSignal<string> = ...

    Tooltip text shown on pointer hover.

    Methods

    • Deactivate (un-check / un-press) this item.

      No-op by default. Overridden by UIToggleTool to set checked to false, enabling radio-style exclusivity in UIToggleGroupTool.

      Returns void

    • Emit a ToolActionEvent for this item.

      Parameters

      • event: MouseEvent | null

        The originating mouse event, or null for programmatic triggers.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods