Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt

Use this file to discover all available pages before exploring further.

The Dock component renders a macOS-style application launcher bar with magnification effects. In Nettalco Theme the root surface uses a semi-transparent white background and border with a pronounced xl border radius, giving the Dock a frosted-glass appearance that floats over page content. Item tokens control individual icon cell sizing, padding, corner radius, and focus ring.

​
Usage

<p-dock [model]="dockItems" position="bottom">
  <ng-template pTemplate="item" let-item>
    <img [src]="item.icon" [alt]="item.label" width="100%" />
  </ng-template>
</p-dock>

import { MenuItem } from 'primeng/api';

dockItems: MenuItem[] = [
  { label: 'Finder',   icon: 'assets/dock/finder.svg' },
  { label: 'Terminal', icon: 'assets/dock/terminal.svg' },
  { label: 'Calendar', icon: 'assets/dock/calendar.svg' },
  { label: 'Mail',     icon: 'assets/dock/mail.svg' }
];

​
Design Tokens

​
Root

TokenValue
root.backgroundrgba(255, 255, 255, 0.1)
root.borderColorrgba(255, 255, 255, 0.2)
root.padding0.5rem
root.borderRadius{border.radius.xl}

​
Item

TokenValue
item.borderRadius{content.border.radius}
item.padding0.5rem
item.size3rem
item.focusRing.width{focus.ring.width}
item.focusRing.style{focus.ring.style}
item.focusRing.color{focus.ring.color}
item.focusRing.offset{focus.ring.offset}
item.focusRing.shadow{focus.ring.shadow}

​
Theme Notes

​
Translucent Surface

Unlike other navigation components that derive their background from {content.background}, the Dock root uses a hardcoded semi-transparent white (rgba(255, 255, 255, 0.1)) and border (rgba(255, 255, 255, 0.2)). This is intentional: the Dock is designed to overlay page content and should appear glassy rather than opaque. If you need dark-mode-aware transparency, override these two tokens in your application’s theme configuration.

​
Sizing

Each dock item cell is 3rem × 3rem by default (set via item.size), with 0.5rem of padding inside and the same 0.5rem padding on the root container. The {border.radius.xl} radius on the root creates the characteristic pill-shaped dock bar.

Build docs developers (and LLMs) love

Get started for freeTalk to us