Dock

Dock is a navigation component consisting of menuitems.

Basic

Advanced

Fri 13:07

Import via Module


import { Dock } from 'primereact/dock';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/dock/dock.min.js"></script>

Getting Started

Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the model property.


export const DockDemo = () => {

    const imgPath = 'images/dock';
    const imgErrorPath = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png';

    const items = [
        {
            label: 'Finder',
            icon: () => <img alt="Finder" src={`${imgPath}/finder.svg`} onError={(e) => e.target.src = imgErrorPath} width="100%" />
        },
        {
            label: 'App Store',
            icon: () => <img alt="App Store" src={`${imgPath}/appstore.svg`} onError={(e) => e.target.src = imgErrorPath} width="100%" />
        },
        {
            label: 'Photos',
            icon: () => <img alt="Photos" src={`${imgPath}/photos.svg`} onError={(e) => e.target.src = imgErrorPath} width="100%" />
        },
        {
            label: 'Trash',
            icon: () => <img alt="trash" src={`${imgPath}/trash.png`} onError={(e) => e.target.src = imgErrorPath} width="100%" />
        }
    ];

    return (
        <Dock model={items} />
    );
}

MenuModel API

Dock uses the common MenuModel API to define the items, visit MenuModel API for details.

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
className	string	null	Style class of the element.
style	object	null	Inline style of the element.
model	object	null	MenuModel instance to define the action items.
position	string	bottom	Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.
header	any	null	Template of header element.
footer	any	null	Template of footer element.
magnification	any	null	Whether to allow scale animation.