# PanelMenu

PanelMenu is a hybrid of Accordion and Tree components.

## Basic

PanelMenu requires a collection of menuitems as its model .

```vue
<template>
    <div class="flex justify-center">
        <PanelMenu :model="items" class="w-full md:w-80" />
    </div>
</template>

<script setup>
import { ref } from "vue";
import CheckCircle from '@primeicons/vue/check-circle';
import Cloud from '@primeicons/vue/cloud';
import CloudDownload from '@primeicons/vue/cloud-download';
import CloudUpload from '@primeicons/vue/cloud-upload';
import Desktop from '@primeicons/vue/desktop';
import File from '@primeicons/vue/file';
import FilePdf from '@primeicons/vue/file-pdf';
import Image from '@primeicons/vue/image';
import Mobile from '@primeicons/vue/mobile';
import Refresh from '@primeicons/vue/refresh';
import Stop from '@primeicons/vue/stop';
import Tablet from '@primeicons/vue/tablet';
import Users from '@primeicons/vue/users';

const items = ref([
    {
        label: 'Files',
        icon: File,
        items: [
            {
                label: 'Documents',
                icon: File,
                items: [
                    {
                        label: 'Invoices',
                        icon: FilePdf,
                        items: [
                            {
                                label: 'Pending',
                                icon: Stop
                            },
                            {
                                label: 'Paid',
                                icon: CheckCircle
                            }
                        ]
                    },
                    {
                        label: 'Clients',
                        icon: Users
                    }
                ]
            },
            {
                label: 'Images',
                icon: Image,
                items: [
                    {
                        label: 'Logos',
                        icon: Image
                    }
                ]
            }
        ]
    },
    {
        label: 'Cloud',
        icon: Cloud,
        items: [
            {
                label: 'Upload',
                icon: CloudUpload
            },
            {
                label: 'Download',
                icon: CloudDownload
            },
            {
                label: 'Sync',
                icon: Refresh
            }
        ]
    },
    {
        label: 'Devices',
        icon: Desktop,
        items: [
            {
                label: 'Phone',
                icon: Mobile
            },
            {
                label: 'Desktop',
                icon: Desktop
            },
            {
                label: 'Tablet',
                icon: Tablet
            }
        ]
    }
]);
<\/script>
```

## Multiple

Only one single root menuitem can be active by default, enable multiple property to be able to open more than one items.

```vue
<template>
    <div class="flex justify-center">
        <PanelMenu :model="items" multiple class="w-full md:w-80" />
    </div>
</template>

<script setup>
import { ref } from "vue";
import CheckCircle from '@primeicons/vue/check-circle';
import Cloud from '@primeicons/vue/cloud';
import CloudDownload from '@primeicons/vue/cloud-download';
import CloudUpload from '@primeicons/vue/cloud-upload';
import Desktop from '@primeicons/vue/desktop';
import File from '@primeicons/vue/file';
import FilePdf from '@primeicons/vue/file-pdf';
import Image from '@primeicons/vue/image';
import Mobile from '@primeicons/vue/mobile';
import Refresh from '@primeicons/vue/refresh';
import Stop from '@primeicons/vue/stop';
import Tablet from '@primeicons/vue/tablet';
import Users from '@primeicons/vue/users';

const items = ref([
    {
        label: 'Files',
        icon: File,
        items: [
            {
                label: 'Documents',
                icon: File,
                items: [
                    {
                        label: 'Invoices',
                        icon: FilePdf,
                        items: [
                            {
                                label: 'Pending',
                                icon: Stop
                            },
                            {
                                label: 'Paid',
                                icon: CheckCircle
                            }
                        ]
                    },
                    {
                        label: 'Clients',
                        icon: Users
                    }
                ]
            },
            {
                label: 'Images',
                icon: Image,
                items: [
                    {
                        label: 'Logos',
                        icon: Image
                    }
                ]
            }
        ]
    },
    {
        label: 'Cloud',
        icon: Cloud,
        items: [
            {
                label: 'Upload',
                icon: CloudUpload
            },
            {
                label: 'Download',
                icon: CloudDownload
            },
            {
                label: 'Sync',
                icon: Refresh
            }
        ]
    },
    {
        label: 'Devices',
        icon: Desktop,
        items: [
            {
                label: 'Phone',
                icon: Mobile
            },
            {
                label: 'Desktop',
                icon: Desktop
            },
            {
                label: 'Tablet',
                icon: Tablet
            }
        ]
    }
]);
<\/script>
```

## Controlled

Menu items can be controlled programmatically.

```vue
<template>
    <div class="flex flex-col items-center gap-4">
        <Button type="button" text @click="toggleAll">Toggle All</Button>
        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
    </div>
</template>

<script setup>
import { ref } from "vue";
import Calendar from '@primeicons/vue/calendar';
import Server from '@primeicons/vue/server';
import Users from '@primeicons/vue/users';

const expandedKeys = ref({});
const items = ref([
    {
        key: '0',
        label: 'Users',
        icon: Users,
        items: [
            {
                key: '0_1',
                label: 'New',
                items: [
                    {
                        key: '0_1_0',
                        label: 'Member'
                    },
                    {
                        key: '0_1_1',
                        label: 'Group'
                    }
                ]
            },
            {
                key: '0_2',
                label: 'Search'
            }
        ]
    },
    {
        key: '1',
        label: 'Tasks',
        icon: Server,
        items: [
            {
                key: '1_0',
                label: 'Add New'
            },
            {
                key: '1_1',
                label: 'Pending'
            },
            {
                key: '1_2',
                label: 'Overdue'
            }
        ]
    },
    {
        key: '2',
        label: 'Calendar',
        icon: Calendar,
        items: [
            {
                key: '2_0',
                label: 'New Event'
            },
            {
                key: '2_1',
                label: 'Today'
            },
            {
                key: '2_2',
                label: 'This Week'
            }
        ]
    }
]);

const toggleAll = () => {
    if (Object.keys(expandedKeys.value).length) collapseAll();
    else expandAll();
}

const expandAll = () => {
    for (let node of items.value) {
        expandNode(node);
    }

    expandedKeys.value = {...expandedKeys.value};
};

const collapseAll = () => {
    expandedKeys.value = {};
};

const expandNode = (node) => {
    if (node.items && node.items.length) {
        expandedKeys.value[node.key] = true;

        for (let child of node.items) {
            expandNode(child);
        }
    }
};
<\/script>
```

## Template

PanelMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.

```vue
<template>
    <div class="flex justify-center">
        <PanelMenu :model="items" class="w-full md:w-80">
            <template #item="{ item, icon, label }">
                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
                    <component :is="icon" class="text-primary group-hover:text-inherit" />
                    <span :class="['ml-2', { 'font-semibold': item.items }]">{{ label }}</span>
                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                </a>
            </template>
        </PanelMenu>
    </div>
</template>

<script setup>
import { ref } from "vue";
import ChartBar from '@primeicons/vue/chart-bar';
import ChartLine from '@primeicons/vue/chart-line';
import Cog from '@primeicons/vue/cog';
import Envelope from '@primeicons/vue/envelope';
import FileEdit from '@primeicons/vue/file-edit';
import Inbox from '@primeicons/vue/inbox';
import List from '@primeicons/vue/list';
import Send from '@primeicons/vue/send';
import Shield from '@primeicons/vue/shield';
import Trash from '@primeicons/vue/trash';
import User from '@primeicons/vue/user';

const items = ref([
    {
        label: 'Mail',
        icon: Envelope,
        badge: 5,
        items: [
            {
                label: 'Compose',
                icon: FileEdit,
                shortcut: '⌘+N'
            },
            {
                label: 'Inbox',
                icon: Inbox,
                badge: 5
            },
            {
                label: 'Sent',
                icon: Send,
                shortcut: '⌘+S'
            },
            {
                label: 'Trash',
                icon: Trash,
                shortcut: '⌘+T'
            }
        ]
    },
    {
        label: 'Reports',
        icon: ChartBar,
        shortcut: '⌘+R',
        items: [
            {
                label: 'Sales',
                icon: ChartLine,
                badge: 3
            },
            {
                label: 'Products',
                icon: List,
                badge: 6
            }
        ]
    },
    {
        label: 'Profile',
        icon: User,
        shortcut: '⌘+W',
        items: [
            {
                label: 'Settings',
                icon: Cog,
                shortcut: '⌘+O'
            },
            {
                label: 'Privacy',
                icon: Shield,
                shortcut: '⌘+P'
            }
        ]
    }
]);
<\/script>
```

## Command

The command property defines the callback to run when an item is activated by click or a key event.

```vue
<template>
    <div class="flex justify-center">
        <PanelMenu :model="items" class="w-full md:w-80" />
        <Toast />
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useToast } from "primevue/usetoast";
import Cloud from '@primeicons/vue/cloud';
import CloudDownload from '@primeicons/vue/cloud-download';
import CloudUpload from '@primeicons/vue/cloud-upload';
import File from '@primeicons/vue/file';
import Plus from '@primeicons/vue/plus';
import Print from '@primeicons/vue/print';
import Search from '@primeicons/vue/search';
import SignOut from '@primeicons/vue/sign-out';

const toast = useToast();

const items = ref([
    {
        label: 'Files',
        icon: File,
        items: [
            {
                label: 'New',
                icon: Plus,
                command: () => {
                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
                }
            },
            {
                label: 'Search',
                icon: Search,
                command: () => {
                    toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
                }
            },
            {
                label: 'Print',
                icon: Print,
                command: () => {
                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
                }
            }
        ]
    },
    {
        label: 'Sync',
        icon: Cloud,
        items: [
            {
                label: 'Import',
                icon: CloudDownload,
                command: () => {
                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
                }
            },
            {
                label: 'Export',
                icon: CloudUpload,
                command: () => {
                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
                }
            }
        ]
    },
    {
        label: 'Sign Out',
        icon: SignOut,
        command: () => {
            toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
        }
    }
]);
<\/script>
```

## Router

Menu items support navigation via router-link, programmatic routing using commands, or external URLs.

```vue
<template>
    <div class="flex justify-center">
        <PanelMenu :model="items" class="w-full md:w-80">
            <template #item="{ item, icon, label }">
                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                        <component :is="icon" />
                        <span class="ml-2">{{ label }}</span>
                    </a>
                </router-link>
                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
                    <component :is="icon" />
                    <span class="ml-2">{{ label }}</span>
                    <AngleDown v-if="item.items" class="text-primary ml-auto" />
                </a>
            </template>
        </PanelMenu>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
import AngleDown from '@primeicons/vue/angle-down';
import Bookmark from '@primeicons/vue/bookmark';
import Eraser from '@primeicons/vue/eraser';
import Heart from '@primeicons/vue/heart';
import Home from '@primeicons/vue/home';
import Link from '@primeicons/vue/link';
import Palette from '@primeicons/vue/palette';
import Star from '@primeicons/vue/star';

const router = useRouter();

const items = ref([
    {
        label: 'Router',
        icon: Palette,
        items: [
            {
                label: 'Styled',
                icon: Eraser,
                route: '/theming/styled'
            },
            {
                label: 'Unstyled',
                icon: Heart,
                route: '/theming/unstyled'
            }
        ]
    },
    {
        label: 'Programmatic',
        icon: Link,
        command: () => {
            router.push('/introduction');
        }
    },
    {
        label: 'External',
        icon: Home,
        items: [
            {
                label: 'Vue.js',
                icon: Star,
                url: 'https://vuejs.org/'
            },
            {
                label: 'Vite.js',
                icon: Bookmark,
                url: 'https://vuejs.org/'
            }
        ]
    }
]);
<\/script>
```

## Accessibility

Screen Reader Accordion header elements have a button role, an aria-label defined using the label property of the menuitem model and aria-controls to define the id of the content section along with aria-expanded for the visibility state. The content of an accordion panel uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header. The tree elements has a tree as the role and each menu item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. Header Keyboard Support Key Function tab Adds focus to the first header when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. enter Toggles the visibility of the content. space Toggles the visibility of the content. down arrow If panel is collapsed then moves focus to the next header, otherwise first treenode of the panel receives the focus. up arrow If previous panel is collapsed then moves focus to the previous header, otherwise last treenode of the previous panel receives the focus. home Moves focus to the first header. end Moves focus to the last header. Tree Keyboard Support Key Function tab Moves focus to the next focusable element in the page tab order. shift + tab Moves focus to the previous focusable element in the page tab order. enter Activates the focused treenode. space Activates the focused treenode. down arrow Moves focus to the next treenode. up arrow Moves focus to the previous treenode. right arrow If node is closed, opens the node otherwise moves focus to the first child node. left arrow If node is open, closes the node otherwise moves focus to the parent node.

## Panel Menu API

### Props

| Name |Type |Default |Description |
| --- | --- | --- | --- |
| model | MenuItem[] | - | An array of menuitems. |
| expandedKeys | PanelMenuExpandedKeys | - | A map of keys to represent the expansion state in controlled mode. |
| multiple | boolean | false | When enabled, multiple root menuitems can be activated at the same time. |
| tabindex | string \| number | - | Index of the element in tabbing order. |
| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
| pt | any | - | Used to pass attributes to DOM elements inside the component. |
| ptOptions | any | - | Used to configure passthrough(pt) options of the component. |
| unstyled | boolean | false | When enabled, it removes component related styles in the core. |

### Pass Through Options

| Name |Type |Description |
| --- | --- | --- |
| root | PanelMenuPassThroughOptionType | Used to pass attributes to the root's DOM element. |
| panel | PanelMenuPassThroughOptionType | Used to pass attributes to the panel's DOM element. |
| header | PanelMenuPassThroughOptionType | Used to pass attributes to the header's DOM element. |
| headerContent | PanelMenuPassThroughOptionType | Used to pass attributes to the header content's DOM element. |
| headerLink | PanelMenuPassThroughOptionType | Used to pass attributes to the header link's DOM element. |
| submenuIcon | PanelMenuPassThroughOptionType | Used to pass attributes to the submenuIcon's DOM element. |
| headerIcon | PanelMenuPassThroughOptionType | Used to pass attributes to the header icon's DOM element. |
| headerLabel | PanelMenuPassThroughOptionType | Used to pass attributes to the header label's DOM element. |
| contentContainer | PanelMenuPassThroughOptionType | Used to pass attributes to the content container's DOM element. |
| content | PanelMenuPassThroughOptionType | Used to pass attributes to the content's DOM element. |
| rootList | PanelMenuPassThroughOptionType | Used to pass attributes to the root list's DOM element. |
| item | PanelMenuPassThroughOptionType | Used to pass attributes to the list item's DOM element. |
| itemContent | PanelMenuPassThroughOptionType | Used to pass attributes to the item content's DOM element. |
| itemLink | PanelMenuPassThroughOptionType | Used to pass attributes to the item link's DOM element. |
| itemIcon | PanelMenuPassThroughOptionType | Used to pass attributes to the item icon's DOM element. |
| itemLabel | PanelMenuPassThroughOptionType | Used to pass attributes to the item label's DOM element. |
| submenu | PanelMenuPassThroughOptionType | Used to pass attributes to the submenu's DOM element. |
| separator | PanelMenuPassThroughOptionType | Used to pass attributes to the separator's DOM element. |
| hooks | any | Used to manage all lifecycle hooks. |
| transition | PanelMenuPassThroughTransitionType | Used to control Vue Transition API. |

### Theming

### CSS Classes

| Class |Description |
| --- | --- |
| p-panelmenu | Class name of the root element |
| p-panelmenu-panel | Class name of the panel element |
| p-panelmenu-header | Class name of the header element |
| p-panelmenu-header-content | Class name of the header content element |
| p-panelmenu-header-link | Class name of the header link element |
| p-panelmenu-header-icon | Class name of the header icon element |
| p-panelmenu-header-label | Class name of the header label element |
| p-panelmenu-content-container | Class name of the content container element |
| p-panelmenu-content | Class name of the content element |
| p-panelmenu-root-list | Class name of the root list element |
| p-panelmenu-item | Class name of the item element |
| p-panelmenu-item-content | Class name of the item content element |
| p-panelmenu-item-link | Class name of the item link element |
| p-panelmenu-item-icon | Class name of the item icon element |
| p-panelmenu-item-label | Class name of the item label element |
| p-panelmenu-submenu-icon | Class name of the submenu icon element |
| p-panelmenu-submenu | Class name of the submenu element |
| p-menuitem-separator |  |

### Design Tokens

| Token |CSS Variable |Description |
| --- | --- | --- |
| panelmenu.gap | --p-panelmenu-gap | Gap of root |
| panelmenu.transition.duration | --p-panelmenu-transition-duration | Transition duration of root |
| panelmenu.panel.background | --p-panelmenu-panel-background | Background of panel |
| panelmenu.panel.border.color | --p-panelmenu-panel-border-color | Border color of panel |
| panelmenu.panel.border.width | --p-panelmenu-panel-border-width | Border width of panel |
| panelmenu.panel.color | --p-panelmenu-panel-color | Color of panel |
| panelmenu.panel.padding | --p-panelmenu-panel-padding | Padding of panel |
| panelmenu.panel.border.radius | --p-panelmenu-panel-border-radius | Border radius of panel |
| panelmenu.panel.first.border.width | --p-panelmenu-panel-first-border-width | First border width of panel |
| panelmenu.panel.first.top.border.radius | --p-panelmenu-panel-first-top-border-radius | First top border radius of panel |
| panelmenu.panel.last.border.width | --p-panelmenu-panel-last-border-width | Last border width of panel |
| panelmenu.panel.last.bottom.border.radius | --p-panelmenu-panel-last-bottom-border-radius | Last bottom border radius of panel |
| panelmenu.item.focus.background | --p-panelmenu-item-focus-background | Focus background of item |
| panelmenu.item.color | --p-panelmenu-item-color | Color of item |
| panelmenu.item.focus.color | --p-panelmenu-item-focus-color | Focus color of item |
| panelmenu.item.gap | --p-panelmenu-item-gap | Gap of item |
| panelmenu.item.padding | --p-panelmenu-item-padding | Padding of item |
| panelmenu.item.border.radius | --p-panelmenu-item-border-radius | Border radius of item |
| panelmenu.item.icon.color | --p-panelmenu-item-icon-color | Icon color of item |
| panelmenu.item.icon.focus.color | --p-panelmenu-item-icon-focus-color | Icon focus color of item |
| panelmenu.item.icon.size | --p-panelmenu-item-icon-size | Icon size of item |
| panelmenu.item.label.font.weight | --p-panelmenu-item-label-font-weight | Font weight of item label |
| panelmenu.item.label.font.size | --p-panelmenu-item-label-font-size | Font size of item label |
| panelmenu.submenu.indent | --p-panelmenu-submenu-indent | Indent of submenu |
| panelmenu.submenu.icon.color | --p-panelmenu-submenu-icon-color | Color of submenu icon |
| panelmenu.submenu.icon.focus.color | --p-panelmenu-submenu-icon-focus-color | Focus color of submenu icon |

## Menu Item API