diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 6009f5d24f..4ac6589f63 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -10217,6 +10217,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -10252,6 +10260,156 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ContextMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContextMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContextMenuState": {
+                    "description": "Defines current inline state in ContextMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "reshow",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current reshow state as a boolean."
+                        },
+                        {
+                            "name": "resetMenu",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current resetMenu state as a boolean."
+                        },
+                        {
+                            "name": "attributeSelector",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current attributeSelector visible state as a string."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContextMenuContext": {
+                    "description": "Defines current options in ContextMenu 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": {
+                "ContextMenuPassThroughType": {
+                    "values": "PassThroughType<T, ContextMenuPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "csstransition": {
diff --git a/components/doc/contextmenu/pt/ptdoc.js b/components/doc/contextmenu/pt/ptdoc.js
new file mode 100644
index 0000000000..342c996020
--- /dev/null
+++ b/components/doc/contextmenu/pt/ptdoc.js
@@ -0,0 +1,453 @@
+import { useRef } from 'react';
+import { ContextMenu } from '../../../lib/contextmenu/ContextMenu';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const cm = useRef(null);
+    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'
+                },
+                {
+                    separator: true
+                },
+                {
+                    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: 'Archieve',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Quit',
+            icon: 'pi pi-fw pi-power-off'
+        }
+    ];
+
+    const code = {
+        basic: `
+<ContextMenu
+    model={items}
+    ref={cm}
+    breakpoint="767px"
+    pt={{
+        action: ({ props, state, context }) => ({ className: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
+    }}
+/>
+<img src="/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
+`,
+        javascript: `
+import React, { useRef } from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+
+export default function PTDemo() {
+    const cm = useRef(null);
+    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'
+                },
+                {
+                    separator: true
+                },
+                {
+                    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: 'Archieve',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Quit',
+            icon: 'pi pi-fw pi-power-off'
+        }
+    ];
+
+    return (
+        <div className="card flex md:justify-content-center">
+            <ContextMenu model={items} ref={cm} breakpoint="767px" />
+            <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function PTDemo() {
+    const cm = useRef(null);
+    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'
+                },
+                {
+                    separator: true
+                },
+                {
+                    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: 'Archieve',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Quit',
+            icon: 'pi pi-fw pi-power-off'
+        }
+    ];
+
+    return (
+        <div className="card flex md:justify-content-center">
+            <ContextMenu model={items} ref={cm} breakpoint="767px" />
+            <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>onContextMenu</i> event of the target to display the menu.
+                </p>
+            </DocSectionText>
+            <div className="card flex md:justify-content-center">
+                <ContextMenu
+                    model={items}
+                    ref={cm}
+                    breakpoint="767px"
+                    pt={{
+                        action: ({ props, state, context }) => ({ className: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
+                    }}
+                />
+                <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/pt/wireframe.js b/components/doc/contextmenu/pt/wireframe.js
new file mode 100644
index 0000000000..c26c4050fc
--- /dev/null
+++ b/components/doc/contextmenu/pt/wireframe.js
@@ -0,0 +1,15 @@
+
+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="contextmenu" />
+            </div>
+        </>
+    );
+};
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
index 2ef1ddc639..2cc2406c27 100644
--- a/components/lib/contextmenu/ContextMenu.js
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -3,7 +3,7 @@ import PrimeReact from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useMatchMedia, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
-import { classNames, DomHandler, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, mergeProps, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
 import { ContextMenuBase } from './ContextMenuBase';
 import { ContextMenuSub } from './ContextMenuSub';
 
@@ -15,6 +15,15 @@ export const ContextMenu = React.memo(
         const [reshowState, setReshowState] = React.useState(false);
         const [resetMenuState, setResetMenuState] = React.useState(false);
         const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
+        const { ptm } = ContextMenuBase.setMetaData({
+            props,
+            state: {
+                visible: visibleState,
+                reshow: reshowState,
+                resetMenu: resetMenuState,
+                attributeSelector: attributeSelectorState
+            }
+        });
         const menuRef = React.useRef(null);
         const currentEvent = React.useRef(null);
         const styleElementRef = React.useRef(null);
@@ -240,12 +249,24 @@ export const ContextMenu = React.memo(
         }));
 
         const createContextMenu = () => {
-            const otherProps = ContextMenuBase.getOtherProps(props);
             const className = classNames('p-contextmenu p-component', props.className, {
                 'p-input-filled': PrimeReact.inputStyle === 'filled',
                 'p-ripple-disabled': PrimeReact.ripple === false
             });
 
+            const rootProps = mergeProps(
+                {
+                    id: props.id,
+                    ref: menuRef,
+                    className,
+                    style: props.style,
+                    onClick: (e) => onMenuClick(e),
+                    onMouseEnter: (e) => onMenuMouseEnter(e)
+                },
+                ContextMenuBase.getOtherProps(props),
+                ptm('root')
+            );
+
             return (
                 <CSSTransition
                     nodeRef={menuRef}
@@ -259,8 +280,8 @@ export const ContextMenu = React.memo(
                     onExit={onExit}
                     onExited={onExited}
                 >
-                    <div ref={menuRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onMenuClick} onMouseEnter={onMenuMouseEnter}>
-                        <ContextMenuSub menuProps={props} model={props.model} root resetMenu={resetMenuState} onLeafClick={onLeafClick} isMobileMode={isMobileMode} submenuIcon={props.submenuIcon} />
+                    <div {...rootProps}>
+                        <ContextMenuSub menuProps={props} model={props.model} root resetMenu={resetMenuState} onLeafClick={onLeafClick} isMobileMode={isMobileMode} submenuIcon={props.submenuIcon} ptm={ptm} />
                     </div>
                 </CSSTransition>
             );
diff --git a/components/lib/contextmenu/ContextMenuBase.js b/components/lib/contextmenu/ContextMenuBase.js
index 00ad663ef6..b1aa92351a 100644
--- a/components/lib/contextmenu/ContextMenuBase.js
+++ b/components/lib/contextmenu/ContextMenuBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const ContextMenuBase = {
+export const ContextMenuBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'ContextMenu',
         id: null,
@@ -18,7 +18,5 @@ export const ContextMenuBase = {
         onHide: null,
         submenuIcon: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, ContextMenuBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, ContextMenuBase.defaultProps)
-};
+    }
+});
diff --git a/components/lib/contextmenu/ContextMenuSub.js b/components/lib/contextmenu/ContextMenuSub.js
index 213e8680f3..a540d45e7d 100644
--- a/components/lib/contextmenu/ContextMenuSub.js
+++ b/components/lib/contextmenu/ContextMenuSub.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useUpdateEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, IconUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, mergeProps } from '../utils/Utils';
 import { AngleRightIcon } from '../icons/angleright';
 
 export const ContextMenuSub = React.memo((props) => {
@@ -10,6 +10,14 @@ export const ContextMenuSub = React.memo((props) => {
     const submenuRef = React.useRef(null);
     const active = props.root || !props.resetMenu;
 
+    const getPTOptions = (item, key) => {
+        return props.ptm(key, {
+            context: {
+                active: activeItemState === item
+            }
+        });
+    };
+
     if (props.resetMenu === true && activeItemState !== null) {
         setActiveItemState(null);
     }
@@ -84,12 +92,21 @@ export const ContextMenuSub = React.memo((props) => {
     });
 
     const createSeparator = (index) => {
-        return <li key={'separator_' + index} className="p-menu-separator" role="separator"></li>;
+        const separatorProps = mergeProps(
+            {
+                role: "separator",
+                key: 'separator_' + index,
+                className: "p-menu-separator",
+            },
+            props.ptm('separator')
+        );
+
+        return <li {...separatorProps}></li>;
     };
 
     const createSubmenu = (item) => {
         if (item.items) {
-            return <ContextMenuSub menuProps={props.menuProps} model={item.items} resetMenu={item !== activeItemState} onLeafClick={props.onLeafClick} isMobileMode={props.isMobileMode} submenuIcon={props.submenuIcon} />;
+            return <ContextMenuSub menuProps={props.menuProps} model={item.items} resetMenu={item !== activeItemState} onLeafClick={props.onLeafClick} isMobileMode={props.isMobileMode} submenuIcon={props.submenuIcon} ptm={props.ptm} />;
         }
 
         return null;
@@ -105,13 +122,45 @@ export const ContextMenuSub = React.memo((props) => {
         const className = classNames('p-menuitem', { 'p-menuitem-active': active }, item.className);
         const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
         const iconClassName = 'p-menuitem-icon';
-        const icon = IconUtils.getJSXIcon(item.icon, { className: iconClassName }, { props: props.menuProps });
+        const iconProps = mergeProps(
+            {
+                className: iconClassName
+            },
+            getPTOptions(item, 'icon')
+        );
+        const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps });
         const submenuIconClassName = 'p-submenu-icon';
-        const submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || <AngleRightIcon className={submenuIconClassName} />, { className: submenuIconClassName }, { props: props.menuProps });
-        const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
+        const submenuIconProps = mergeProps(
+            {
+                className: submenuIconClassName
+            },
+            getPTOptions(item, 'submenuIcon')
+        );
+
+        const labelProps = mergeProps(
+            {
+                className: "p-menuitem-text"
+            },
+            getPTOptions(item, 'label')
+        );
+        const submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || <AngleRightIcon {...submenuIconProps} />, { ...submenuIconProps }, { props: props.menuProps });
+        const label = item.label && <span {...labelProps}>{item.label}</span>;
         const submenu = createSubmenu(item);
+        const actionProps = mergeProps(
+            {
+                href: item.url || '#',
+                className: linkClassName,
+                target: item.target,
+                onClick: (event) => onItemClick(event, item, index),
+                role: "menuitem",
+                'aria-haspopup': item.items != null,
+                '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-haspopup={item.items != null} aria-disabled={item.disabled}>
+            <a {...actionProps}>
                 {icon}
                 {label}
                 {submenuIcon}
@@ -119,8 +168,20 @@ export const ContextMenuSub = React.memo((props) => {
             </a>
         );
 
+        const menuitemProps = mergeProps(
+            {
+                id: item.id,
+                role: "none",
+                className,
+                style: item.style,
+                key,
+                onMouseEnter: (event) => onItemMouseEnter(event, item)
+            },
+            getPTOptions(item, 'menuitem')
+        );
+
         return (
-            <li key={key} role="none" id={item.id} className={className} style={item.style} onMouseEnter={(event) => onItemMouseEnter(event, item)}>
+            <li {...menuitemProps}>
                 {content}
                 {submenu}
             </li>
@@ -139,10 +200,17 @@ export const ContextMenuSub = React.memo((props) => {
         'p-submenu-list': !props.root
     });
     const submenu = createMenu();
+    const menuProps = mergeProps(
+        {
+            ref: submenuRef,
+            className
+        },
+        props.ptm('menu')
+    )
 
     return (
         <CSSTransition nodeRef={submenuRef} classNames="p-contextmenusub" in={active} timeout={{ enter: 0, exit: 0 }} unmountOnExit onEnter={onEnter}>
-            <ul ref={submenuRef} className={className}>
+            <ul {...menuProps}>
                 {submenu}
             </ul>
         </CSSTransition>
diff --git a/components/lib/contextmenu/contextmenu.d.ts b/components/lib/contextmenu/contextmenu.d.ts
index bd83decb4c..bdabaa8d25 100644
--- a/components/lib/contextmenu/contextmenu.d.ts
+++ b/components/lib/contextmenu/contextmenu.d.ts
@@ -10,7 +10,93 @@
 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 ContextMenuPassThroughType<T> = PassThroughType<T, ContextMenuPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ContextMenuPassThroughMethodOptions {
+    props: ContextMenuProps;
+    state: ContextMenuState;
+    context: ContextMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ContextMenuProps.pt}
+ */
+export interface ContextMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ContextMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: ContextMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+}
+
+/**
+ * Defines current inline state in ContextMenu component.
+ */
+export interface ContextMenuState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current reshow state as a boolean.
+     * @defaultValue false
+     */
+    reshow: boolean;
+    /**
+     * Current resetMenu state as a boolean.
+     * @defaultValue false
+     */
+    resetMenu: boolean;
+    /**
+     * Current attributeSelector visible state as a string.
+     */
+    attributeSelector: boolean;
+}
+
+/**
+ * Defines current options in ContextMenu component.
+ */
+export interface ContextMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
 
 /**
  * Defines valid properties in ContextMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
@@ -73,6 +159,11 @@ export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTM
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ContextMenuPassThroughOptions}
+     */
+    pt?: ContextMenuPassThroughOptions;
 }
 
 /**
diff --git a/pages/contextmenu/index.js b/pages/contextmenu/index.js
index a306dc8eab..fe2cd248de 100644
--- a/pages/contextmenu/index.js
+++ b/pages/contextmenu/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/contextmenu/pt/ptdoc';
+import { Wireframe } from '../../components/doc/contextmenu/pt/wireframe';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/contextmenu/accessibilitydoc';
 import { BasicDoc } from '../../components/doc/contextmenu/basicdoc';
@@ -33,8 +36,26 @@ const ContextMenuDemo = () => {
             component: AccessibilityDoc
         }
     ];
+const ptDocs = [
+    {
+        id: 'pt.wireframe',
+        label: 'Wireframe',
+        component: Wireframe
+    },
+    {
+        id: 'pt.contextmenu.options',
+        label: 'ContextMenu PT Options',
+        component: DocApiTable
+    },
+    {
+        id: 'pt.demo',
+        label: 'Example',
+        component: PTDoc
+    }
+];
 
-    return <DocComponent title="React ContextMenu Component" header="ContextMenu" description="ContextMenu displays an overlay menu on right click of its target." componentDocs={docs} apiDocs={['ContextMenu', 'MenuItem']} />;
+
+    return <DocComponent title="React ContextMenu Component" header="ContextMenu" description="ContextMenu displays an overlay menu on right click of its target." componentDocs={docs} apiDocs={['ContextMenu', 'MenuItem']} ptDocs={ptDocs} />;
 };
 
 export default ContextMenuDemo;