Dock is a navigation component consisting of menuitems.
import Dock from 'primevue/dock';
Menu requires a collection of menuitems as its model. Default location is bottom and other sides are also available when defined with the position property.
<Dock :model="items" :position="position">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
A sample macOS implementation using various components.
<Dock :model="items">
<template #item="{ item }">
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
</Dock>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-dock | Container element. |
p-dock-list-container | Container of the list. |
p-dock-list | List of items. |
p-dock-item | Each items in list. |
p-menuitem-content | Content of menuitem. |
p-dock-link | Link of the menuitem. |
p-dock-icon | Icon of a menuitem. |
Dock component uses the menu role with the aria-orientation and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled.
Key | Function |
---|---|
tab | Moves focus to the first menuitem. |
enter | Activates the focused menuitem. |
space | Activates the focused menuitem. |
down arrow | Moves focus to the next menuitem in vertical layout. |
up arrow | Moves focus to the previous menuitem in vertical layout. |
right arrow | Moves focus to the next menuitem in horizontal layout. |
left arrow | Moves focus to the previous menuitem in horizontal layout. |
home | Moves focus to the first menuitem. |
end | Moves focus to the last menuitem. |