Dock

Overview

Dock groups frequent actions into a compact bar. Pass an items array of NeuDockItem, each with a unique key and a label. Use command for an action, routerLink for an application route or url for a link. Icons are optional and resolved by your application; active marks the current destination.

position sets a horizontal bar for top/bottom and a vertical bar for left/right; it does not fix the dock to the viewport. magnification enlarges items on hover with a fine pointer. breakpoint switches to the compact mobile presentation.

Basic interaction

Activate Workspace, Documents or Search. Each item runs its command and emits itemClick; the counters below show both actions. Settings starts disabled. Open Code to see the item definitions and event handlers.

Configurator

Change the options, try the result and see the template update. Open Code for the complete data model and implementation.

<neu-dock
  [items]="dockItems()"
  ariaLabel="Example navigation"
  position="bottom"
  direction="ltr"
  breakpoint="960px"
  [magnification]="true"
  (itemClick)="selectItem($event)"
/>

import { signal } from '@angular/core';

export const dockItems = signal([
  {
    "key": "home",
    "label": "Workspace",
    "icon": "home",
    "active": true,
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "files",
    "label": "Documents",
    "icon": "folder",
    "badge": 3,
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "search",
    "label": "Search",
    "icon": "search",
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "settings",
    "label": "Settings",
    "icon": "settings",
    "disabled": true,
    "command": () => { /* Handler in the complete example. */ }
  }
]);

Data and content

itemClick reports activation after the item command. itemFocus and itemBlur report focus events. The application owns work, routing and active data; Core owns hover/focus presentation and keyboard navigation. neuDockItem replaces visible item content with item, active and index while retaining the owning link/button and accessible label.

Accessibility and keyboard

Name the dock. Tab reaches the active available item; arrows follow orientation/direction and Home/End reach the ends. Hidden/disabled actions are excluded from roving focus. Enter/Space activate commands; links retain their native navigation. Tooltip text is supplemental, not the only accessible label. Custom Templates should not add nested interactive controls.

API

Inputs and Outputs match the installed package. Named types link to definitions. Each available Template/projection has an executable example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

import { NeuDockItemDirective } from '@neural-ui/core/dock';

// Public declaration (reference only)
export declare class NeuDockItemDirective {
}

import type { NeuDockItemTemplateContext } from '@neural-ui/core/dock';

import { NeuDockItemDirective } from '@neural-ui/core/dock';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuDockItemTemplateContext>;

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuDockItem } from '@neural-ui/core/dock';

// Public declaration (reference only)
export interface NeuDockItem extends NeuMenuActionLike<NeuDockItem> {
  data?: unknown;
  key: string;
  label: string;
}

import type { NeuDockItem } from '@neural-ui/core/dock';

import type { NeuDockItemTemplateContext } from '@neural-ui/core/dock';

// Public declaration (reference only)
export interface NeuDockItemTemplateContext {
  $implicit: NeuDockItem;
  active: boolean;
  index: number;
}

import type { NeuDockPosition } from '@neural-ui/core/dock';

// Public declaration (reference only)
export type NeuDockPosition = 'top' | 'right' | 'bottom' | 'left';

Styles and tokens

Use supported public tokens for the component. Icon resolution and surrounding example layout belong to the application. Check both themes and narrow screens.

Related components

Compare the related navigation components to choose the interaction that fits your interface.

• Menu
• MenuButton
• TieredMenu