Dock

Position and custom icons

Choose an edge, then use Tab to enter the dock and arrow keys to move between applications.

Open Files, Messages or Calendar to explore a sample application window.

Navigation without magnification

Router links and external links retain native navigation. Angular documentation opens in a new tab.

Usage

import { AvDock, AvDockItem } from 'avero-ui';

items: AvDockItem[] = [
  { label: 'Files', command: () => this.openFiles() },
  { label: 'Settings', disabled: true }
];

<av-dock [model]="items" position="bottom" ariaLabel="Applications" />

API and accessibility

Inputs: model, position (bottom, top, left, right), magnification, ariaLabel, ariaLabelledBy. Output: onItemClick with item and originalEvent.

Items require a descriptive label and support icon (CSS class), disabled, visible, command, routerLink, queryParams, fragment, url and target. The optional #item template receives the item and index. Supply non-interactive content; the component owns the menuitem and visible label.

The menu has one Tab stop. Left/Right move horizontally, Up/Down vertically; Home/End move to the first/last enabled item. Enter/Space activate. Tab and Shift+Tab leave the menu. Disabled items are skipped and hidden items are omitted.

Visible labels, focus outlines and targets of at least 64 pixels support accessibility. Motion is disabled with prefers-reduced-motion. Keep custom colors contrasting, provide meaningful labels and verify custom template content. The dock stays in normal layout flow; give its container height to demonstrate edge alignment.