diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 02dc003526..c99957fa86 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -27551,6 +27551,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -27559,6 +27567,212 @@
                     "values": []
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "PanelMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerAction",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the header action's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the submenuIcon's DOM element."
+                        },
+                        {
+                            "name": "headerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the header icon's DOM element."
+                        },
+                        {
+                            "name": "headerSubmenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the header submenu icon's DOM element."
+                        },
+                        {
+                            "name": "headerLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the header label's DOM element."
+                        },
+                        {
+                            "name": "toggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toggleable content's DOM element."
+                        },
+                        {
+                            "name": "headerToggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header toggleable content's DOM element."
+                        },
+                        {
+                            "name": "menuContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the menu content's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelMenuState": {
+                    "description": "Defines current inline state in PanelMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "activeItem",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "description": "Active item path."
+                        },
+                        {
+                            "name": "animationDisabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the menu is visible or not."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelMenuContext": {
+                    "description": "Defines current options in PanelMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of menuitem as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PanelMenuPassThroughType": {
+                    "values": "PassThroughType<T, PanelMenuPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "password": {
diff --git a/components/doc/panelmenu/pt/ptdoc.js b/components/doc/panelmenu/pt/ptdoc.js
new file mode 100644
index 0000000000..95355745a6
--- /dev/null
+++ b/components/doc/panelmenu/pt/ptdoc.js
@@ -0,0 +1,423 @@
+import { PanelMenu } from '../../../lib/panelmenu/PanelMenu';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-fw pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-plus',
+                    items: [
+                        {
+                            label: 'Bookmark',
+                            icon: 'pi pi-fw pi-bookmark'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-fw pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-trash'
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-fw pi-pencil',
+            items: [
+                {
+                    label: 'Left',
+                    icon: 'pi pi-fw pi-align-left'
+                },
+                {
+                    label: 'Right',
+                    icon: 'pi pi-fw pi-align-right'
+                },
+                {
+                    label: 'Center',
+                    icon: 'pi pi-fw pi-align-center'
+                },
+                {
+                    label: 'Justify',
+                    icon: 'pi pi-fw pi-align-justify'
+                }
+            ]
+        },
+        {
+            label: 'Users',
+            icon: 'pi pi-fw pi-user',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-user-minus'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        {
+                            label: 'Filter',
+                            icon: 'pi pi-fw pi-filter',
+                            items: [
+                                {
+                                    label: 'Print',
+                                    icon: 'pi pi-fw pi-print'
+                                }
+                            ]
+                        },
+                        {
+                            icon: 'pi pi-fw pi-bars',
+                            label: 'List'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Events',
+            icon: 'pi pi-fw pi-calendar',
+            items: [
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Save',
+                            icon: 'pi pi-fw pi-calendar-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                },
+                {
+                    label: 'Archive',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        }
+    ];
+    const code = {
+        basic: `
+<PanelMenu
+    model={items}
+    pt={{
+        root: { className: 'w-full md:w-25rem' },
+        headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined }),
+        action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
+    }}
+/>
+`,
+        javascript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+
+export default function PTDemo() {
+    const items = [
+        {
+            label:'File',
+            icon:'pi pi-fw pi-file',
+            items:[
+                {
+                    label:'New',
+                    icon:'pi pi-fw pi-plus',
+                    items:[
+                    {
+                        label:'Bookmark',
+                        icon:'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label:'Video',
+                        icon:'pi pi-fw pi-video'
+                    }
+                    ]
+                },
+                {
+                    label:'Delete',
+                    icon:'pi pi-fw pi-trash'
+                },
+                {
+                    label:'Export',
+                    icon:'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label:'Edit',
+            icon:'pi pi-fw pi-pencil',
+            items:[
+                {
+                    label:'Left',
+                    icon:'pi pi-fw pi-align-left'
+                },
+                {
+                    label:'Right',
+                    icon:'pi pi-fw pi-align-right'
+                },
+                {
+                    label:'Center',
+                    icon:'pi pi-fw pi-align-center'
+                },
+                {
+                    label:'Justify',
+                    icon:'pi pi-fw pi-align-justify'
+                }
+            ]
+        },
+        {
+            label:'Users',
+            icon:'pi pi-fw pi-user',
+            items:[
+                {
+                    label:'New',
+                    icon:'pi pi-fw pi-user-plus'
+                },
+                {
+                    label:'Delete',
+                    icon:'pi pi-fw pi-user-minus'
+                },
+                {
+                    label:'Search',
+                    icon:'pi pi-fw pi-users',
+                    items:[
+                    {
+                        label:'Filter',
+                        icon:'pi pi-fw pi-filter',
+                        items:[
+                            {
+                                label:'Print',
+                                icon:'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon:'pi pi-fw pi-bars',
+                        label:'List'
+                    }
+                    ]
+                }
+            ]
+        },
+        {
+            label:'Events',
+            icon:'pi pi-fw pi-calendar',
+            items:[
+                {
+                    label:'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items:[
+                    {
+                        label:'Save',
+                        icon:'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label:'Delete',
+                        icon:'pi pi-fw pi-calendar-minus'
+                    }
+                    ]
+                },
+                {
+                    label:'Archive',
+                    icon:'pi pi-fw pi-calendar-times',
+                    items:[
+                    {
+                        label:'Remove',
+                        icon:'pi pi-fw pi-calendar-minus'
+                    }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu
+                model={items}
+                pt={{
+                    root: { className: 'w-full md:w-25rem' },
+                    headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined }),
+                    action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function PTDemo() {
+    const items: MenuItem[] = [
+        {
+            label:'File',
+            icon:'pi pi-fw pi-file',
+            items:[
+                {
+                    label:'New',
+                    icon:'pi pi-fw pi-plus',
+                    items:[
+                    {
+                        label:'Bookmark',
+                        icon:'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label:'Video',
+                        icon:'pi pi-fw pi-video'
+                    }
+                    ]
+                },
+                {
+                    label:'Delete',
+                    icon:'pi pi-fw pi-trash'
+                },
+                {
+                    label:'Export',
+                    icon:'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label:'Edit',
+            icon:'pi pi-fw pi-pencil',
+            items:[
+                {
+                    label:'Left',
+                    icon:'pi pi-fw pi-align-left'
+                },
+                {
+                    label:'Right',
+                    icon:'pi pi-fw pi-align-right'
+                },
+                {
+                    label:'Center',
+                    icon:'pi pi-fw pi-align-center'
+                },
+                {
+                    label:'Justify',
+                    icon:'pi pi-fw pi-align-justify'
+                }
+            ]
+        },
+        {
+            label:'Users',
+            icon:'pi pi-fw pi-user',
+            items:[
+                {
+                    label:'New',
+                    icon:'pi pi-fw pi-user-plus'
+                },
+                {
+                    label:'Delete',
+                    icon:'pi pi-fw pi-user-minus'
+                },
+                {
+                    label:'Search',
+                    icon:'pi pi-fw pi-users',
+                    items:[
+                    {
+                        label:'Filter',
+                        icon:'pi pi-fw pi-filter',
+                        items:[
+                            {
+                                label:'Print',
+                                icon:'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon:'pi pi-fw pi-bars',
+                        label:'List'
+                    }
+                    ]
+                }
+            ]
+        },
+        {
+            label:'Events',
+            icon:'pi pi-fw pi-calendar',
+            items:[
+                {
+                    label:'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items:[
+                    {
+                        label:'Save',
+                        icon:'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label:'Delete',
+                        icon:'pi pi-fw pi-calendar-minus'
+                    }
+                    ]
+                },
+                {
+                    label:'Archive',
+                    icon:'pi pi-fw pi-calendar-times',
+                    items:[
+                    {
+                        label:'Remove',
+                        icon:'pi pi-fw pi-calendar-minus'
+                    }
+                    ]
+                }
+            ]
+        }
+    ];
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu
+                model={items}
+                pt={{
+                    root: { className: 'w-full md:w-25rem' },
+                    headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined }),
+                    action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <PanelMenu
+                    model={items}
+                    pt={{
+                        root: { className: 'w-full md:w-25rem' },
+                        headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined }),
+                        action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/pt/wireframe.js b/components/doc/panelmenu/pt/wireframe.js
new file mode 100644
index 0000000000..d641272578
--- /dev/null
+++ b/components/doc/panelmenu/pt/wireframe.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="panelmenu" />
+            </div>
+        </>
+    );
+};
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 30127c5c47..048d9935aa 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
-import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils';
 import { PanelMenuBase } from './PanelMenuBase';
 import { PanelMenuSub } from './PanelMenuSub';
-import { ChevronRightIcon } from '../icons/chevronright';
-import { ChevronDownIcon } from '../icons/chevrondown';
 
 export const PanelMenu = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -18,6 +18,15 @@ export const PanelMenu = React.memo(
         const headerId = idState + '_header';
         const contentId = idState + '_content';
 
+        const { ptm } = PanelMenuBase.setMetaData({
+            props,
+            state: {
+                id: idState,
+                activeItem: activeItemState,
+                animationDisabled: animationDisabled
+            }
+        });
+
         const findActiveItem = () => {
             if (props.model) {
                 if (props.multiple) {
@@ -77,6 +86,14 @@ export const PanelMenu = React.memo(
             return activeItemState && (props.multiple ? activeItemState.indexOf(item) > -1 : activeItemState === item);
         };
 
+        const getPTOptions = (item, key) => {
+            return ptm(key, {
+                context: {
+                    active: isItemActive(item)
+                }
+            });
+        };
+
         React.useImperativeHandle(ref, () => ({
             props,
             getElement: () => elementRef.current
@@ -109,14 +126,44 @@ export const PanelMenu = React.memo(
             const className = classNames('p-panelmenu-panel', item.className);
             const headerClassName = classNames('p-component p-panelmenu-header', { 'p-highlight': active, 'p-disabled': item.disabled });
             const iconClassName = classNames('p-menuitem-icon', item.icon);
-            const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props });
+            const headerIconProps = mergeProps(
+                {
+                    className: iconClassName
+                },
+                getPTOptions(item, 'headerIcon')
+            );
+            const icon = IconUtils.getJSXIcon(item.icon, { ...headerIconProps }, { props });
             const submenuIconClassName = 'p-panelmenu-icon';
-            const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || <ChevronDownIcon className={submenuIconClassName} /> : props.submenuIcon || <ChevronRightIcon className={submenuIconClassName} />);
-            const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
+            const headerSubmenuIconProps = mergeProps(
+                {
+                    className: submenuIconClassName
+                },
+                getPTOptions(item, 'headerSubmenuIcon')
+            );
+            const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || <ChevronDownIcon {...headerSubmenuIconProps} /> : props.submenuIcon || <ChevronRightIcon {...headerSubmenuIconProps} />);
+            const headerLabelProps = mergeProps(
+                {
+                    className: 'p-menuitem-text'
+                },
+                getPTOptions(item, 'headerLabel')
+            );
+            const label = item.label && <span {...headerLabelProps}>{item.label}</span>;
             const contentWrapperClassName = classNames('p-toggleable-content', { 'p-toggleable-content-collapsed': !active });
             const menuContentRef = React.createRef();
+            const headerActionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    className: 'p-panelmenu-header-link',
+                    onClick: (e) => onItemClick(e, item),
+                    'aria-expanded': active,
+                    id: headerId,
+                    'aria-controls': contentId,
+                    'aria-disabled': item.disabled
+                },
+                getPTOptions(item, 'headerAction')
+            );
             let content = (
-                <a href={item.url || '#'} className="p-panelmenu-header-link" onClick={(e) => onItemClick(e, item)} aria-expanded={active} id={headerId} aria-controls={contentId} aria-disabled={item.disabled}>
+                <a {...headerActionProps}>
                     {submenuIcon}
                     {icon}
                     {label}
@@ -139,15 +186,48 @@ export const PanelMenu = React.memo(
                 content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
             }
 
+            const panelProps = mergeProps(
+                {
+                    key: key,
+                    className: className,
+                    style: item.style
+                },
+                getPTOptions(item, 'panel')
+            );
+
+            const headerProps = mergeProps(
+                {
+                    className: headerClassName,
+                    style: item.style
+                },
+                getPTOptions(item, 'header')
+            );
+
+            const menuContentProps = mergeProps(
+                {
+                    className: 'p-panelmenu-content'
+                },
+                getPTOptions(item, 'menuContent')
+            );
+
+            const headerToggleableContentProps = mergeProps(
+                {
+                    ref: menuContentRef,
+                    className: contentWrapperClassName,
+                    role: 'region',
+                    id: contentId,
+                    'aria-labelledby': headerId
+                },
+                getPTOptions(item, 'headerToggleableContent')
+            );
+
             return (
-                <div key={key} className={className} style={item.style}>
-                    <div className={headerClassName} style={item.style}>
-                        {content}
-                    </div>
+                <div {...panelProps}>
+                    <div {...headerProps}>{content}</div>
                     <CSSTransition nodeRef={menuContentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} onEnter={onEnter} disabled={animationDisabled} in={active} unmountOnExit options={props.transitionOptions}>
-                        <div ref={menuContentRef} className={contentWrapperClassName} role="region" id={contentId} aria-labelledby={headerId}>
-                            <div className="p-panelmenu-content">
-                                <PanelMenuSub menuProps={props} model={item.items} className="p-panelmenu-root-submenu" multiple={props.multiple} submenuIcon={props.submenuIcon} />
+                        <div {...headerToggleableContentProps}>
+                            <div {...menuContentProps}>
+                                <PanelMenuSub menuProps={props} model={item.items} className="p-panelmenu-root-submenu" multiple={props.multiple} submenuIcon={props.submenuIcon} ptm={ptm} />
                             </div>
                         </div>
                     </CSSTransition>
@@ -159,15 +239,21 @@ export const PanelMenu = React.memo(
             return props.model ? props.model.map(createPanel) : null;
         };
 
-        const otherProps = PanelMenuBase.getOtherProps(props);
         const className = classNames('p-panelmenu p-component', props.className);
         const panels = createPanels();
 
-        return (
-            <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
-                {panels}
-            </div>
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: className,
+                style: props.style
+            },
+            PanelMenuBase.getOtherProps(props),
+            ptm('root')
         );
+
+        return <div {...rootProps}>{panels}</div>;
     })
 );
 
diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
index f2d6eec2cd..cc0153e9df 100644
--- a/components/lib/panelmenu/PanelMenuBase.js
+++ b/components/lib/panelmenu/PanelMenuBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const PanelMenuBase = {
+export const PanelMenuBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Panel',
         id: null,
@@ -11,7 +11,5 @@ export const PanelMenuBase = {
         multiple: false,
         transitionOptions: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, PanelMenuBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, PanelMenuBase.defaultProps)
-};
+    }
+});
diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
index 4f1e90d6de..f00b2be5cc 100644
--- a/components/lib/panelmenu/PanelMenuSub.js
+++ b/components/lib/panelmenu/PanelMenuSub.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect } from '../hooks/Hooks';
-import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
-import { ChevronRightIcon } from '../icons/chevronright';
 import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 
 export const PanelMenuSub = React.memo((props) => {
     const [activeItemState, setActiveItemState] = React.useState(null);
 
+    const getPTOptions = (item, key) => {
+        return props.ptm(key, {
+            context: {
+                active: isItemActive(item)
+            }
+        });
+    };
+
     const findActiveItem = () => {
         if (props.model) {
             if (props.multiple) {
@@ -74,7 +82,15 @@ export const PanelMenuSub = React.memo((props) => {
     const createSeparator = (index) => {
         const key = 'separator_' + index;
 
-        return <li key={key} className="p-menu-separator"></li>;
+        const separatorProps = mergeProps(
+            {
+                key,
+                className: 'p-menu-separator'
+            },
+            props.ptm('separator')
+        );
+
+        return <li {...separatorProps}></li>;
     };
 
     const createSubmenu = (item, active) => {
@@ -83,11 +99,19 @@ export const PanelMenuSub = React.memo((props) => {
         });
         const submenuRef = React.createRef();
 
+        const toggleableContentProps = mergeProps(
+            {
+                ref: submenuRef,
+                className
+            },
+            props.ptm('toggleableContent')
+        );
+
         if (item.items) {
             return (
                 <CSSTransition nodeRef={submenuRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={active} unmountOnExit>
-                    <div ref={submenuRef} className={className}>
-                        <PanelMenuSub menuProps={props.menuProps} model={item.items} multiple={props.multiple} submenuIcon={props.submenuIcon} />
+                    <div {...toggleableContentProps}>
+                        <PanelMenuSub menuProps={props.menuProps} model={item.items} multiple={props.multiple} submenuIcon={props.submenuIcon} ptm={props.ptm} />
                     </div>
                 </CSSTransition>
             );
@@ -106,13 +130,43 @@ export const PanelMenuSub = React.memo((props) => {
         const className = classNames('p-menuitem', item.className);
         const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
         const iconClassName = classNames('p-menuitem-icon', item.icon);
-        const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props: props.menuProps });
-        const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
+        const iconProps = mergeProps(
+            {
+                className: iconClassName
+            },
+            getPTOptions(item, 'icon')
+        );
+        const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps });
+        const labelProps = mergeProps(
+            {
+                className: 'p-menuitem-text'
+            },
+            getPTOptions(item, 'label')
+        );
+        const label = item.label && <span {...labelProps}>{item.label}</span>;
         const submenuIconClassName = 'p-panelmenu-icon';
-        const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || <ChevronDownIcon className={submenuIconClassName} /> : props.submenuIcon || <ChevronRightIcon className={submenuIconClassName} />);
+        const submenuIconProps = mergeProps(
+            {
+                className: submenuIconClassName
+            },
+            getPTOptions(item, 'submenuicon')
+        );
+        const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || <ChevronDownIcon {...submenuIconProps} /> : props.submenuIcon || <ChevronRightIcon {...submenuIconProps} />);
         const submenu = createSubmenu(item, active);
+        const actionProps = mergeProps(
+            {
+                href: item.url || '#',
+                className: linkClassName,
+                target: item.target,
+                onClick: (event) => onItemClick(event, item, index),
+                role: 'menuitem',
+                'aria-disabled': item.disabled
+            },
+            getPTOptions(item, 'action')
+        );
+
         let content = (
-            <a href={item.url || '#'} className={linkClassName} target={item.target} onClick={(event) => onItemClick(event, item, index)} role="menuitem" aria-disabled={item.disabled}>
+            <a {...actionProps}>
                 {submenuIcon}
                 {icon}
                 {label}
@@ -135,8 +189,19 @@ export const PanelMenuSub = React.memo((props) => {
             content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
         }
 
+        const menuitemProps = mergeProps(
+            {
+                key,
+                id: item.id,
+                className,
+                style: item.style,
+                role: 'none'
+            },
+            getPTOptions(item, 'menuitem')
+        );
+
         return (
-            <li key={key} id={item.id} className={className} style={item.style} role="none">
+            <li {...menuitemProps}>
                 {content}
                 {submenu}
             </li>
@@ -154,11 +219,15 @@ export const PanelMenuSub = React.memo((props) => {
     const className = classNames('p-submenu-list', props.className);
     const menu = createMenu();
 
-    return (
-        <ul className={className} role="tree">
-            {menu}
-        </ul>
+    const menuProps = mergeProps(
+        {
+            className,
+            role: 'tree'
+        },
+        props.ptm('menu')
     );
+
+    return <ul {...menuProps}>{menu}</ul>;
 });
 
 PanelMenuSub.displayName = 'PanelMenuSub';
diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts
index 0ad75e47dc..223b3b3b54 100644
--- a/components/lib/panelmenu/panelmenu.d.ts
+++ b/components/lib/panelmenu/panelmenu.d.ts
@@ -10,13 +10,130 @@
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 import { MenuItem } from '../menuitem';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type PanelMenuPassThroughType<T> = PassThroughType<T, PanelMenuPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelMenuPassThroughMethodOptions {
+    props: PanelMenuProps;
+    state: PanelMenuState;
+    context: PanelMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelMenuProps.pt}
+ */
+export interface PanelMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headerAction?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the submenuIcon's DOM element.
+     */
+    submenuIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header icon's DOM element.
+     */
+    headerIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header submenu icon's DOM element.
+     */
+    headerSubmenuIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header label's DOM element.
+     */
+    headerLabel?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleable content's DOM element.
+     */
+    toggleableContent?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header toggleable content's DOM element.
+     */
+    headerToggleableContent?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the menu content's DOM element.
+     */
+    menuContent?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+}
+
+/**
+ * Defines current inline state in PanelMenu component.
+ */
+export interface PanelMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Active item path.
+     * @type {MenuItem}
+     */
+    activeItem: MenuItem[];
+    /**
+     * Whether the menu is visible or not.
+     * @defaultValue false
+     */
+    animationDisabled: boolean;
+}
+
+/**
+ * Defines current options in PanelMenu component.
+ */
+export interface PanelMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
 
 /**
  * Defines valid properties in PanelMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
     /**
      * An array of menuitems.
      */
@@ -39,6 +156,11 @@ export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelMenuPassThroughOptions}
+     */
+    pt?: PanelMenuPassThroughOptions;
 }
 
 /**
diff --git a/pages/panelmenu/index.js b/pages/panelmenu/index.js
index 0b84e5fe21..6a16a69b62 100644
--- a/pages/panelmenu/index.js
+++ b/pages/panelmenu/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/panelmenu/pt/ptdoc';
+import { Wireframe } from '../../components/doc/panelmenu/pt/wireframe';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/panelmenu/accessibilitydoc';
 import { BasicDoc } from '../../components/doc/panelmenu/basicdoc';
@@ -33,8 +36,25 @@ const PanelMenuDemo = () => {
             component: AccessibilityDoc
         }
     ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.panelmenu.options',
+            label: 'PanelMenu PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.demo',
+            label: 'Example',
+            component: PTDoc
+        }
+    ];
 
-    return <DocComponent title="React PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." componentDocs={docs} apiDocs={['PanelMenu', 'MenuItem']} />;
+    return <DocComponent title="React PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." componentDocs={docs} apiDocs={['PanelMenu', 'MenuItem']} ptDocs={ptDocs} />;
 };
 
 export default PanelMenuDemo;