From 37eb456f9bc0a25899f9a8d7a88b3d9e0977c40d Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 30 Apr 2024 16:03:20 +0300
Subject: [PATCH] Refactor #5592 - For Menubar, PanelMenu, Steps, TabMenu,
 TieredMenu

---
 components/lib/menubar/Menubar.d.ts           | 24 +++++------
 components/lib/menubar/Menubar.vue            |  2 +-
 components/lib/menubar/MenubarSub.vue         | 34 +++++++++-------
 components/lib/menubar/style/MenubarStyle.js  | 12 +++---
 components/lib/panelmenu/PanelMenu.d.ts       | 40 +++++++++----------
 components/lib/panelmenu/PanelMenu.vue        | 12 +++---
 components/lib/panelmenu/PanelMenuList.vue    |  6 +--
 components/lib/panelmenu/PanelMenuSub.vue     | 22 +++++-----
 .../lib/panelmenu/style/PanelMenuStyle.js     | 16 ++++----
 components/lib/steps/Steps.d.ts               | 16 ++++----
 components/lib/steps/Steps.vue                | 28 ++++++-------
 components/lib/steps/style/StepsStyle.js      | 10 ++---
 components/lib/tabmenu/TabMenu.d.ts           | 20 +++++-----
 components/lib/tabmenu/TabMenu.vue            | 36 ++++++++---------
 components/lib/tabmenu/style/TabMenuStyle.js  | 10 ++---
 .../themes/primeone/base/panelmenu/index.js   |  2 +-
 components/lib/tieredmenu/TieredMenu.d.ts     | 22 +++++-----
 components/lib/tieredmenu/TieredMenu.vue      |  2 +-
 components/lib/tieredmenu/TieredMenuSub.vue   | 30 +++++++-------
 .../lib/tieredmenu/style/TieredMenuStyle.js   | 12 +++---
 20 files changed, 181 insertions(+), 175 deletions(-)

diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
index e3e23f01d..68ace7c61 100755
--- a/components/lib/menubar/Menubar.d.ts
+++ b/components/lib/menubar/Menubar.d.ts
@@ -59,29 +59,29 @@ export interface MenubarPassThroughOptions {
      */
     root?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the list's DOM element.
+     * Used to pass attributes to the root list's DOM element.
      */
-    menu?: MenubarPassThroughOptionType;
+    rootList?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the item's DOM element.
      */
-    menuitem?: MenubarPassThroughOptionType;
+    item?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: MenubarPassThroughOptionType;
+    itemContent?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: MenubarPassThroughOptionType;
+    itemLink?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: MenubarPassThroughOptionType;
+    itemIcon?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: MenubarPassThroughOptionType;
+    itemLabel?: MenubarPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu icon's DOM element.
      */
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index 92aa2e410..45a3040f0 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -404,7 +404,7 @@ export default {
         onEnterKey(event) {
             if (this.focusedItemInfo.index !== -1) {
                 const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
-                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
 
                 anchorElement ? anchorElement.click() : element && element.click();
 
diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
index ad0c131e9..3e745c68e 100755
--- a/components/lib/menubar/MenubarSub.vue
+++ b/components/lib/menubar/MenubarSub.vue
@@ -1,11 +1,11 @@
 <template>
-    <ul :class="level === 0 ? cx('menu') : cx('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+    <ul :class="level === 0 ? cx('rootList') : cx('submenu')" v-bind="level === 0 ? ptm('rootList') : ptm('submenu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
                 role="menuitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -14,17 +14,23 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, index, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'item')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
+                <div
+                    :class="cx('itemContent')"
+                    @click="onItemClick($event, processedItem)"
+                    @mouseenter="onItemMouseEnter($event, processedItem)"
+                    @mousemove="onItemMouseMove($event, processedItem)"
+                    v-bind="getPTOptions(processedItem, index, 'itemContent')"
+                >
                     <template v-if="!templates.item">
-                        <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                            <span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
+                        <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'itemLink')">
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'itemIcon')" />
+                            <span :id="getItemLabelId(processedItem)" :class="cx('itemLabel')" v-bind="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
                                 <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
                                 <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@@ -179,23 +185,23 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         tabindex: -1,
                         'aria-hidden': true
                     },
-                    this.getPTOptions(processedItem, index, 'action')
+                    this.getPTOptions(processedItem, index, 'itemLink')
                 ),
                 icon: mergeProps(
                     {
-                        class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
+                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
                     },
-                    this.getPTOptions(processedItem, index, 'icon')
+                    this.getPTOptions(processedItem, index, 'itemIcon')
                 ),
                 label: mergeProps(
                     {
-                        class: this.cx('label')
+                        class: this.cx('itemLabel')
                     },
-                    this.getPTOptions(processedItem, index, 'label')
+                    this.getPTOptions(processedItem, index, 'itemLabel')
                 ),
                 submenuicon: mergeProps(
                     {
diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js
index ddd690af3..ee3f05f72 100644
--- a/components/lib/menubar/style/MenubarStyle.js
+++ b/components/lib/menubar/style/MenubarStyle.js
@@ -14,8 +14,8 @@ const classes = {
     ],
     start: 'p-menubar-start',
     button: 'p-menubar-button',
-    menu: 'p-menubar-root-list',
-    menuitem: ({ instance, processedItem }) => [
+    rootList: 'p-menubar-root-list',
+    item: ({ instance, processedItem }) => [
         'p-menubar-item',
         {
             'p-menubar-item-active': instance.isItemActive(processedItem),
@@ -23,10 +23,10 @@ const classes = {
             'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    content: 'p-menubar-item-content',
-    action: 'p-menubar-item-link',
-    icon: 'p-menubar-item-icon',
-    label: 'p-menubar-item-label',
+    itemContent: 'p-menubar-item-content',
+    itemLink: 'p-menubar-item-link',
+    itemIcon: 'p-menubar-item-icon',
+    itemLabel: 'p-menubar-item-label',
     submenuIcon: 'p-menubar-submenu-icon',
     submenu: 'p-menubar-submenu',
     separator: 'p-menubar-separator',
diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts
index 527ab8b4c..03abdd45a 100755
--- a/components/lib/panelmenu/PanelMenu.d.ts
+++ b/components/lib/panelmenu/PanelMenu.d.ts
@@ -73,9 +73,9 @@ export interface PanelMenuPassThroughOptions {
      */
     headerContent?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the header action's DOM element.
+     * Used to pass attributes to the header link's DOM element.
      */
-    headerAction?: PanelMenuPassThroughOptionType;
+    headerLink?: PanelMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the submenuIcon's DOM element.
      */
@@ -89,33 +89,33 @@ export interface PanelMenuPassThroughOptions {
      */
     headerLabel?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the toggleable content's DOM element.
+     * Used to pass attributes to the content container's DOM element.
      */
-    toggleableContent?: PanelMenuPassThroughOptionType;
-    /**
-     * Used to pass attributes to the menu content's DOM element.
-     */
-    menuContent?: PanelMenuPassThroughOptionType;
-    /**
-     * Used to pass attributes to the list's DOM element.
-     */
-    menu?: PanelMenuPassThroughOptionType;
-    /**
-     * Used to pass attributes to the list item's DOM element.
-     */
-    menuitem?: PanelMenuPassThroughOptionType;
+    contentContainer?: PanelMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */
     content?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the root list's DOM element.
      */
-    action?: PanelMenuPassThroughOptionType;
+    rootList?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the list item's DOM element.
      */
-    icon?: PanelMenuPassThroughOptionType;
+    menuitem?: PanelMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item content's DOM element.
+     */
+    itemContent?: PanelMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item link's DOM element.
+     */
+    itemLink?: PanelMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item icon's DOM element.
+     */
+    itemIcon?: PanelMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the label's DOM element.
      */
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 950969a10..6d426f7a2 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -19,7 +19,7 @@
                 >
                     <div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)">
                         <template v-if="!$slots.item">
-                            <a :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions('headerAction', item, index)">
+                            <a :href="getItemProp(item, 'url')" :class="cx('headerLink')" :tabindex="-1" v-bind="getPTOptions('headerLink', item, index)">
                                 <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
                                     <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', item, index)" />
                                 </slot>
@@ -32,8 +32,8 @@
                     </div>
                 </div>
                 <transition name="p-toggleable-content" v-bind="ptm('transition')">
-                    <div v-show="isItemActive(item)" :id="getContentId(index)" :class="cx('toggleableContent')" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('toggleableContent')">
-                        <div v-if="getItemProp(item, 'items')" :class="cx('menuContent')" v-bind="ptm('menuContent')">
+                    <div v-show="isItemActive(item)" :id="getContentId(index)" :class="cx('contentContainer')" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('contentContainer')">
+                        <div v-if="getItemProp(item, 'items')" :class="cx('content')" v-bind="ptm('content')">
                             <PanelMenuList
                                 :panelId="getPanelId(index)"
                                 :items="getItemProp(item, 'items')"
@@ -164,14 +164,14 @@ export default {
             }
         },
         onHeaderArrowDownKey(event) {
-            const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null;
+            const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : null;
 
             rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
             event.preventDefault();
         },
         onHeaderArrowUpKey(event) {
             const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
-            const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null;
+            const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null;
 
             rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
             event.preventDefault();
@@ -185,7 +185,7 @@ export default {
             event.preventDefault();
         },
         onHeaderEnterKey(event, item) {
-            const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]');
+            const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headerlink"]');
 
             headerAction ? headerAction.click() : this.onHeaderClick(event, item);
             event.preventDefault();
diff --git a/components/lib/panelmenu/PanelMenuList.vue b/components/lib/panelmenu/PanelMenuList.vue
index 545eb5296..6386e496a 100644
--- a/components/lib/panelmenu/PanelMenuList.vue
+++ b/components/lib/panelmenu/PanelMenuList.vue
@@ -1,7 +1,7 @@
 <template>
     <PanelMenuSub
         :id="panelId + '_list'"
-        :class="cx('menu')"
+        :class="cx('rootList')"
         role="tree"
         :tabindex="-1"
         :aria-activedescendant="focused ? focusedItemId : undefined"
@@ -17,7 +17,7 @@
         @item-mousemove="onItemMouseMove"
         :pt="pt"
         :unstyled="unstyled"
-        v-bind="ptm('menu')"
+        v-bind="ptm('rootList')"
     />
 </template>
 
@@ -203,7 +203,7 @@ export default {
         onEnterKey(event) {
             if (ObjectUtils.isNotEmpty(this.focusedItem)) {
                 const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
-                const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="action"]') || DomHandler.findSingle(element, 'a,button'));
+                const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="itemlink"]') || DomHandler.findSingle(element, 'a,button'));
 
                 anchorElement ? anchorElement.click() : element && element.click();
             }
diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
index b991cdc66..107f5c6f8 100755
--- a/components/lib/panelmenu/PanelMenuSub.vue
+++ b/components/lib/panelmenu/PanelMenuSub.vue
@@ -4,7 +4,7 @@
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
-                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
                 :style="getItemProp(processedItem, 'style')"
                 role="treeitem"
                 :aria-label="getItemLabel(processedItem)"
@@ -12,19 +12,19 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions('menuitem', processedItem, index)"
+                v-bind="getPTOptions('item', processedItem, index)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
+                <div :class="cx('itemContent')" @click="onItemClick($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions('itemContent', processedItem, index)">
                     <template v-if="!templates.item">
-                        <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
+                        <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('itemLink', processedItem, index)">
                             <template v-if="isItemGroup(processedItem)">
                                 <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions('submenuIcon', processedItem, index)" />
                                 <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', processedItem, index)" />
                             </template>
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('itemIcon', processedItem, index)" />
                             <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
@@ -40,7 +40,7 @@
                     ></component>
                 </div>
                 <transition name="p-toggleable-content" v-bind="ptm('transition')">
-                    <div v-show="isItemActive(processedItem)" :class="cx('toggleableContent')" v-bind="ptm('toggleableContent')">
+                    <div v-show="isItemActive(processedItem)" :class="cx('contentContainer')" v-bind="ptm('contentContainer')">
                         <PanelMenuSub
                             v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                             :id="getItemId(processedItem) + '_list'"
@@ -173,17 +173,17 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         tabindex: -1,
                         'aria-hidden': true
                     },
-                    this.getPTOptions('action', processedItem, index)
+                    this.getPTOptions('itemLink', processedItem, index)
                 ),
                 icon: mergeProps(
                     {
-                        class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
+                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
                     },
-                    this.getPTOptions('icon', processedItem, index)
+                    this.getPTOptions('itemIcon', processedItem, index)
                 ),
                 label: mergeProps(
                     {
diff --git a/components/lib/panelmenu/style/PanelMenuStyle.js b/components/lib/panelmenu/style/PanelMenuStyle.js
index ddd3ffb8e..673195f19 100644
--- a/components/lib/panelmenu/style/PanelMenuStyle.js
+++ b/components/lib/panelmenu/style/PanelMenuStyle.js
@@ -11,22 +11,22 @@ const classes = {
         }
     ],
     headerContent: 'p-panelmenu-header-content',
-    headerAction: 'p-panelmenu-header-link',
+    headerLink: 'p-panelmenu-header-link',
     headerIcon: 'p-panelmenu-header-icon',
     headerLabel: 'p-panelmenu-header-label',
-    toggleableContent: 'p-panelmenu-content-container',
-    menuContent: 'p-panelmenu-content',
-    menu: 'p-panelmenu-root-list',
-    menuitem: ({ instance, processedItem }) => [
+    contentContainer: 'p-panelmenu-content-container',
+    content: 'p-panelmenu-content',
+    rootList: 'p-panelmenu-root-list',
+    item: ({ instance, processedItem }) => [
         'p-panelmenu-item',
         {
             'p-focus': instance.isItemFocused(processedItem),
             'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    content: 'p-panelmenu-item-content',
-    action: 'p-panelmenu-item-link',
-    icon: 'p-panelmenu-item-icon',
+    itemContent: 'p-panelmenu-item-content',
+    itemLink: 'p-panelmenu-item-link',
+    itemIcon: 'p-panelmenu-item-icon',
     label: 'p-panelmenu-item-label',
     submenuIcon: 'p-panelmenu-submenu-icon',
     submenu: 'p-panelmenu-submenu',
diff --git a/components/lib/steps/Steps.d.ts b/components/lib/steps/Steps.d.ts
index 2dd8f4580..1c0024ead 100755
--- a/components/lib/steps/Steps.d.ts
+++ b/components/lib/steps/Steps.d.ts
@@ -57,23 +57,23 @@ export interface StepsPassThroughOptions {
     /**
      * Used to pass attributes to the list's DOM element.
      */
-    menu?: StepsPassThroughOptionType;
+    list?: StepsPassThroughOptionType;
     /**
      * Used to pass attributes to the list item's DOM element.
      */
-    menuitem?: StepsPassThroughOptionType;
+    item?: StepsPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: StepsPassThroughOptionType;
+    itemLink?: StepsPassThroughOptionType;
     /**
-     * Used to pass attributes to the step's DOM element.
+     * Used to pass attributes to the item number's DOM element.
      */
-    step?: StepsPassThroughOptionType;
+    itemNumber?: StepsPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: StepsPassThroughOptionType;
+    itemLabel?: StepsPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index 32dc47891..a0ee31aec 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -1,22 +1,22 @@
 <template>
     <nav :id="id" :class="cx('root')" v-bind="ptmi('root')">
-        <ol ref="list" :class="cx('menu')" v-bind="ptm('menu')">
+        <ol ref="list" :class="cx('list')" v-bind="ptm('list')">
             <template v-for="(item, index) of model" :key="label(item) + '_' + index.toString()">
                 <li
                     v-if="visible(item)"
-                    :class="[cx('menuitem', { item, index }), item.class]"
+                    :class="[cx('item', { item, index }), item.class]"
                     :style="item.style"
                     :aria-current="isActive(index) ? 'step' : undefined"
                     @click="onItemClick($event, item, index)"
                     @keydown="onItemKeydown($event, item, index)"
-                    v-bind="getPTOptions('menuitem', item, index)"
+                    v-bind="getPTOptions('item', item, index)"
                     :data-p-highlight="isActive(index)"
                     :data-p-disabled="isItemDisabled(item, index)"
                 >
                     <template v-if="!$slots.item">
-                        <span :class="cx('action')" v-bind="getPTOptions('action', item, index)">
-                            <span :class="cx('step')" v-bind="getPTOptions('step', item, index)">{{ index + 1 }}</span>
-                            <span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
+                        <span :class="cx('itemLink')" v-bind="getPTOptions('itemLink', item, index)">
+                            <span :class="cx('itemNumber')" v-bind="getPTOptions('itemNumber', item, index)">{{ index + 1 }}</span>
+                            <span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', item, index)">{{ label(item) }}</span>
                         </span>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :index="index" :active="index === d_activeStep" :label="label(item)" :props="getMenuItemProps(item, index)"></component>
@@ -160,12 +160,12 @@ export default {
             return prevItem ? prevItem.children[0] : null;
         },
         findFirstItem() {
-            const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="menuitem"]');
+            const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="item"]');
 
             return firstSibling ? firstSibling.children[0] : null;
         },
         findLastItem() {
-            const siblings = DomHandler.find(this.$refs.list, '[data-pc-section="menuitem"]');
+            const siblings = DomHandler.find(this.$refs.list, '[data-pc-section="item"]');
 
             return siblings ? siblings[siblings.length - 1].children[0] : null;
         },
@@ -193,23 +193,23 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         onClick: ($event) => this.onItemClick($event, item),
                         onKeyDown: ($event) => this.onItemKeydown($event, item)
                     },
-                    this.getPTOptions('action', item, index)
+                    this.getPTOptions('itemLink', item, index)
                 ),
                 step: mergeProps(
                     {
-                        class: this.cx('step')
+                        class: this.cx('itemNumber')
                     },
-                    this.getPTOptions('step', item, index)
+                    this.getPTOptions('itemNumber', item, index)
                 ),
                 label: mergeProps(
                     {
-                        class: this.cx('label')
+                        class: this.cx('itemLabel')
                     },
-                    this.getPTOptions('label', item, index)
+                    this.getPTOptions('itemLabel', item, index)
                 )
             };
         }
diff --git a/components/lib/steps/style/StepsStyle.js b/components/lib/steps/style/StepsStyle.js
index 6d0b0b60a..d941d38c7 100644
--- a/components/lib/steps/style/StepsStyle.js
+++ b/components/lib/steps/style/StepsStyle.js
@@ -2,17 +2,17 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
-    menu: 'p-steps-list',
-    menuitem: ({ instance, item, index }) => [
+    list: 'p-steps-list',
+    item: ({ instance, item, index }) => [
         'p-steps-item',
         {
             'p-steps-item-active': instance.isActive(index),
             'p-disabled': instance.isItemDisabled(item, index)
         }
     ],
-    action: 'p-steps-item-link',
-    step: 'p-steps-item-number',
-    label: 'p-steps-item-label'
+    itemLink: 'p-steps-item-link',
+    itemNumber: 'p-steps-item-number',
+    itemLabel: 'p-steps-item-label'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
index 52a5bb003..598d08aff 100755
--- a/components/lib/tabmenu/TabMenu.d.ts
+++ b/components/lib/tabmenu/TabMenu.d.ts
@@ -59,25 +59,25 @@ export interface TabMenuPassThroughOptions {
      */
     root?: TabMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the list's DOM element.
+     * Used to pass attributes to the tablist's DOM element.
      */
-    menu?: TabMenuPassThroughOptionType;
+    tablist?: TabMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the item's DOM element.
      */
-    menuitem?: TabMenuPassThroughOptionType;
+    item?: TabMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: TabMenuPassThroughOptionType;
+    itemLink?: TabMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item itemIcon's DOM element.
      */
-    icon?: TabMenuPassThroughOptionType;
+    itemIcon?: TabMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: TabMenuPassThroughOptionType;
+    itemLabel?: TabMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the inkbar's DOM element.
      */
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index 6a56f70a4..f371ca566 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -1,23 +1,23 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
-        <ul ref="nav" :class="cx('menu')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
+        <ul ref="nav" :class="cx('tablist')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('tablist')">
             <template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
                 <li
                     v-if="visible(item)"
                     ref="tab"
-                    :class="[cx('menuitem', { item, index: i }), item.class]"
+                    :class="[cx('item', { item, index: i }), item.class]"
                     role="presentation"
                     @click="onItemClick($event, item, i)"
                     @keydown="onKeydownItem($event, item, i)"
-                    v-bind="getPTOptions('menuitem', item, i)"
+                    v-bind="getPTOptions('item', item, i)"
                     :data-p-highlight="d_activeIndex === i"
                     :data-p-disabled="disabled(item)"
                 >
                     <template v-if="!$slots.item">
-                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', item, i)">
-                            <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="cx('icon')" />
-                            <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
-                            <span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
+                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('itemLink')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('itemLink', item, i)">
+                            <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="cx('itemIcon')" />
+                            <span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="getPTOptions('itemIcon', item, i)" />
+                            <span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', item, i)">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :index="i" :active="i === d_activeIndex" :label="label(item)" :props="getMenuItemProps(item, i)"></component>
@@ -170,17 +170,17 @@ export default {
             return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0]) : null;
         },
         findFirstItem() {
-            const firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"]');
 
             return firstSibling ? firstSibling.children[0] : null;
         },
         findLastItem() {
-            const siblings = DomHandler.find(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const siblings = DomHandler.find(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"]');
 
             return siblings ? siblings[siblings.length - 1].children[0] : null;
         },
         findActiveItem() {
-            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-highlight="true"]');
 
             return activeItem ? activeItem.children[0] : null;
         },
@@ -190,8 +190,8 @@ export default {
             focusableItem.focus();
         },
         onTabKey() {
-            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
-            const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="action"][tabindex="0"]');
+            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-highlight="true"]');
+            const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="itemlink"][tabindex="0"]');
 
             if (focusedItem !== activeItem.children[0]) {
                 activeItem && (activeItem.children[0].tabIndex = '0');
@@ -230,24 +230,24 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         tabindex: -1,
                         onClick: ($event) => this.onItemClick($event, item, index),
                         onKeyDown: ($event) => this.onKeydownItem($event, item, index)
                     },
-                    this.getPTOptions('action', item, index)
+                    this.getPTOptions('itemLink', item, index)
                 ),
                 icon: mergeProps(
                     {
-                        class: [this.cx('icon'), item.icon]
+                        class: [this.cx('itemIcon'), item.icon]
                     },
-                    this.getPTOptions('icon', item, index)
+                    this.getPTOptions('itemIcon', item, index)
                 ),
                 label: mergeProps(
                     {
-                        class: this.cx('label')
+                        class: this.cx('itemLabel')
                     },
-                    this.getPTOptions('label', item, index)
+                    this.getPTOptions('itemLabel', item, index)
                 )
             };
         }
diff --git a/components/lib/tabmenu/style/TabMenuStyle.js b/components/lib/tabmenu/style/TabMenuStyle.js
index 7c58f6210..fd584382a 100644
--- a/components/lib/tabmenu/style/TabMenuStyle.js
+++ b/components/lib/tabmenu/style/TabMenuStyle.js
@@ -2,17 +2,17 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: 'p-tabmenu p-component',
-    menu: 'p-tabmenu-tablist',
-    menuitem: ({ instance, index, item }) => [
+    tablist: 'p-tabmenu-tablist',
+    item: ({ instance, index, item }) => [
         'p-tabmenu-item',
         {
             'p-tabmenu-item-active': instance.d_activeIndex === index,
             'p-disabled': instance.disabled(item)
         }
     ],
-    action: 'p-tabmenu-item-link',
-    icon: 'p-tabmenu-item-icon',
-    label: 'p-tabmenu-item-label',
+    itemLink: 'p-tabmenu-item-link',
+    itemIcon: 'p-tabmenu-item-icon',
+    itemLabel: 'p-tabmenu-item-label',
     inkbar: 'p-tabmenu-ink-bar'
 };
 
diff --git a/components/lib/themes/primeone/base/panelmenu/index.js b/components/lib/themes/primeone/base/panelmenu/index.js
index 0a2f71725..df48d6193 100644
--- a/components/lib/themes/primeone/base/panelmenu/index.js
+++ b/components/lib/themes/primeone/base/panelmenu/index.js
@@ -107,7 +107,7 @@ export default {
     color: ${dt('panelmenu.item.color')};
 }
 
-.p-menupanelmenu-item.p-focus > .p-panelmenu-item-content {
+.p-panelmenu-item.p-focus > .p-panelmenu-item-content {
     background: ${dt('panelmenu.item.focus.background')};
     color: ${dt('panelmenu.item.focus.color')};
 }
diff --git a/components/lib/tieredmenu/TieredMenu.d.ts b/components/lib/tieredmenu/TieredMenu.d.ts
index 1417edc8e..5288499eb 100755
--- a/components/lib/tieredmenu/TieredMenu.d.ts
+++ b/components/lib/tieredmenu/TieredMenu.d.ts
@@ -61,29 +61,29 @@ export interface TieredMenuPassThroughOptions<T = any> {
      */
     root?: TieredMenuPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the list's DOM element.
+     * Used to pass attributes to the root list's DOM element.
      */
-    menu?: TieredMenuPassThroughOptionType<T>;
+    rootList?: TieredMenuPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the list item's DOM element.
      */
-    menuitem?: TieredMenuPassThroughOptionType<T>;
+    item?: TieredMenuPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: TieredMenuPassThroughOptionType<T>;
+    itemContent?: TieredMenuPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: TieredMenuPassThroughOptionType<T>;
+    itemLink?: TieredMenuPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: TieredMenuPassThroughOptionType<T>;
+    itemIcon?: TieredMenuPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: TieredMenuPassThroughOptionType<T>;
+    itemLabel?: TieredMenuPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the submenu icon's DOM element.
      */
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index 1b4cb52d1..cda9e5e35 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -365,7 +365,7 @@ export default {
         onEnterKey(event) {
             if (this.focusedItemInfo.index !== -1) {
                 const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
-                const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
+                const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="itemlink"]');
 
                 anchorElement ? anchorElement.click() : element && element.click();
 
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index aeaa93e33..21d0b95ed 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -1,12 +1,12 @@
 <template>
     <transition name="p-tieredmenu" @enter="onEnter" v-bind="ptm('menu.transition')">
-        <ul v-if="level === 0 ? true : visible" :ref="containerRef" :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+        <ul v-if="level === 0 ? true : visible" :ref="containerRef" :class="level === 0 ? cx('rootList') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('rootList') : ptm('submenu')">
             <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
                 <li
                     v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     :id="getItemId(processedItem)"
                     :style="getItemProp(processedItem, 'style')"
-                    :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                    :class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
                     role="menuitem"
                     :aria-label="getItemLabel(processedItem)"
                     :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -15,23 +15,23 @@
                     :aria-level="level + 1"
                     :aria-setsize="getAriaSetSize()"
                     :aria-posinset="getAriaPosInset(index)"
-                    v-bind="getPTOptions(processedItem, index, 'menuitem')"
+                    v-bind="getPTOptions(processedItem, index, 'item')"
                     :data-p-highlight="isItemActive(processedItem)"
                     :data-p-focused="isItemFocused(processedItem)"
                     :data-p-disabled="isItemDisabled(processedItem)"
                 >
                     <div
-                        :class="cx('content')"
+                        :class="cx('itemContent')"
                         @click="onItemClick($event, processedItem)"
                         @mouseenter="onItemMouseEnter($event, processedItem)"
                         @mousemove="onItemMouseMove($event, processedItem)"
-                        v-bind="getPTOptions(processedItem, index, 'content')"
+                        v-bind="getPTOptions(processedItem, index, 'itemContent')"
                     >
                         <template v-if="!templates.item">
-                            <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                                <span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'itemLink')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'itemIcon')" />
+                                <span :id="getItemLabelId(processedItem)" :class="cx('itemLabel')" v-bind="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
                                 <template v-if="getItemProp(processedItem, 'items')">
                                     <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
                                     <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@@ -185,23 +185,23 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         tabindex: -1,
                         'aria-hidden': true
                     },
-                    this.getPTOptions(processedItem, index, 'action')
+                    this.getPTOptions(processedItem, index, 'itemLink')
                 ),
                 icon: mergeProps(
                     {
-                        class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
+                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
                     },
-                    this.getPTOptions(processedItem, index, 'icon')
+                    this.getPTOptions(processedItem, index, 'itemIcon')
                 ),
                 label: mergeProps(
                     {
-                        class: this.cx('label')
+                        class: this.cx('itemLabel')
                     },
-                    this.getPTOptions(processedItem, index, 'label')
+                    this.getPTOptions(processedItem, index, 'itemLabel')
                 ),
                 submenuicon: mergeProps(
                     {
diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js
index 0c4521a2c..26a235bec 100644
--- a/components/lib/tieredmenu/style/TieredMenuStyle.js
+++ b/components/lib/tieredmenu/style/TieredMenuStyle.js
@@ -13,8 +13,8 @@ const classes = {
         }
     ],
     start: 'p-tieredmenu-start',
-    menu: 'p-tieredmenu-root-list',
-    menuitem: ({ instance, processedItem }) => [
+    rootList: 'p-tieredmenu-root-list',
+    item: ({ instance, processedItem }) => [
         'p-tieredmenu-item',
         {
             'p-tieredmenu-item-active': instance.isItemActive(processedItem),
@@ -22,10 +22,10 @@ const classes = {
             'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    content: 'p-tieredmenu-item-content',
-    action: 'p-tieredmenu-item-link',
-    icon: 'p-tieredmenu-item-icon',
-    text: 'p-tieredmenu-item-label',
+    itemContent: 'p-tieredmenu-item-content',
+    itemLink: 'p-tieredmenu-item-link',
+    itemIcon: 'p-tieredmenu-item-icon',
+    itemLabel: 'p-tieredmenu-item-label',
     submenuIcon: 'p-tieredmenu-submenu-icon',
     submenu: 'p-tieredmenu-submenu',
     separator: 'p-tieredmenu-separator',