diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index f16ed67bb5..5ab824d95a 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -129,7 +129,7 @@ export interface ZIndexOptions {
 
 export type InputStyleType = 'outlined' | 'filled';
 
-export type AppendToType = 'self' | HTMLElement | undefined | null;
+export type AppendToType = 'self' | HTMLElement | undefined | null | (() => HTMLElement);
 
 /**
  * Filter match modes for DataTable filter menus.
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index 1e6502869d..da565f89f4 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -236,7 +236,7 @@ export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.HT
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @defaultValue false
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 57dff35134..516466aa06 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -1534,7 +1534,9 @@ export const Calendar = React.memo(
         };
 
         const appendDisabled = () => {
-            return props.appendTo === 'self' || props.inline;
+            const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo;
+
+            return appendTo === 'self' || props.inline;
         };
 
         const alignOverlay = () => {
diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
index 4c143426fa..4a6c7de88c 100644
--- a/components/lib/calendar/calendar.d.ts
+++ b/components/lib/calendar/calendar.d.ts
@@ -523,7 +523,7 @@ interface CalendarBaseProps {
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @defaultValue false
diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
index 322451933c..78750f21fb 100644
--- a/components/lib/cascadeselect/cascadeselect.d.ts
+++ b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -257,7 +257,7 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}
diff --git a/components/lib/colorpicker/colorpicker.d.ts b/components/lib/colorpicker/colorpicker.d.ts
index ae1aa799dc..666639db18 100644
--- a/components/lib/colorpicker/colorpicker.d.ts
+++ b/components/lib/colorpicker/colorpicker.d.ts
@@ -149,7 +149,7 @@ export interface ColorPickerProps extends Omit<React.DetailedHTMLProps<React.Inp
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @defaultValue false
diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts
index 39d8344e3d..dc816566f8 100644
--- a/components/lib/confirmdialog/confirmdialog.d.ts
+++ b/components/lib/confirmdialog/confirmdialog.d.ts
@@ -214,7 +214,7 @@ export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide' | 'footer
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Style class of the element.
      */
diff --git a/components/lib/confirmpopup/confirmpopup.d.ts b/components/lib/confirmpopup/confirmpopup.d.ts
index 01fbf21c04..1947442832 100644
--- a/components/lib/confirmpopup/confirmpopup.d.ts
+++ b/components/lib/confirmpopup/confirmpopup.d.ts
@@ -211,7 +211,7 @@ export interface ConfirmPopupProps {
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Enables to hide the popup when outside is clicked.
      * @defaultValue true
diff --git a/components/lib/contextmenu/contextmenu.d.ts b/components/lib/contextmenu/contextmenu.d.ts
index 42c213aef5..c0529b511c 100644
--- a/components/lib/contextmenu/contextmenu.d.ts
+++ b/components/lib/contextmenu/contextmenu.d.ts
@@ -147,7 +147,7 @@ export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTM
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      */
diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts
index 4c7191c8e5..087f66b26c 100644
--- a/components/lib/datatable/datatable.d.ts
+++ b/components/lib/datatable/datatable.d.ts
@@ -1221,7 +1221,7 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    paginatorDropdownAppendTo?: 'self' | HTMLElement | null | undefined;
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * Content for the left side of the paginator.
      */
diff --git a/components/lib/dataview/dataview.d.ts b/components/lib/dataview/dataview.d.ts
index e64fff6399..5bd3465f2a 100755
--- a/components/lib/dataview/dataview.d.ts
+++ b/components/lib/dataview/dataview.d.ts
@@ -285,7 +285,7 @@ export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null;
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Array of integer values to display inside rows per page dropdown.
      */
diff --git a/components/lib/dialog/dialog.d.ts b/components/lib/dialog/dialog.d.ts
index 333fa492cd..8fda2692a4 100644
--- a/components/lib/dialog/dialog.d.ts
+++ b/components/lib/dialog/dialog.d.ts
@@ -137,7 +137,7 @@ export interface DialogProps {
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Defines a string that labels the close icon.
      */
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index 701ef07e77..dcc710b444 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -220,7 +220,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Used to define a string that labels the component.
      */
diff --git a/components/lib/menu/menu.d.ts b/components/lib/menu/menu.d.ts
index eb5cd99a0d..4110f07b53 100644
--- a/components/lib/menu/menu.d.ts
+++ b/components/lib/menu/menu.d.ts
@@ -118,7 +118,7 @@ export interface MenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index 6a75171cda..34c27d0bba 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -421,7 +421,7 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
diff --git a/components/lib/overlaypanel/overlaypanel.d.ts b/components/lib/overlaypanel/overlaypanel.d.ts
index cbd9330f27..527d3006f9 100644
--- a/components/lib/overlaypanel/overlaypanel.d.ts
+++ b/components/lib/overlaypanel/overlaypanel.d.ts
@@ -106,7 +106,7 @@ export interface OverlayPanelProps extends Omit<React.DetailedHTMLProps<React.HT
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Aria label of the close icon.
      * @defaultValue close
diff --git a/components/lib/paginator/paginator.d.ts b/components/lib/paginator/paginator.d.ts
index 83220e3a40..fae1178f1b 100644
--- a/components/lib/paginator/paginator.d.ts
+++ b/components/lib/paginator/paginator.d.ts
@@ -391,7 +391,7 @@ interface PaginatorRowsPerPageDropdownOptions {
     /**
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      */
-    appendTo: 'self' | HTMLElement | null | undefined;
+    appendTo: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * The current page number.
      */
@@ -610,7 +610,7 @@ export interface PaginatorProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    dropdownAppendTo?: 'self' | HTMLElement | null | undefined;
+    dropdownAppendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * Callback to invoke when page changes, the event object contains information about the new state.
      * @param {PaginatorPageChangeEvent} event - Custom page change event.
diff --git a/components/lib/password/password.d.ts b/components/lib/password/password.d.ts
index 8a221c443b..b9e43f7f34 100644
--- a/components/lib/password/password.d.ts
+++ b/components/lib/password/password.d.ts
@@ -215,7 +215,7 @@ export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputH
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Template of panel header if "feedback" is enabled.
      */
diff --git a/components/lib/portal/Portal.js b/components/lib/portal/Portal.js
index 09bb7959a9..1959c3436c 100644
--- a/components/lib/portal/Portal.js
+++ b/components/lib/portal/Portal.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
-import { DomHandler } from '../utils/Utils';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
 import { PortalBase } from './PortalBase';
 
 export const Portal = React.memo((inProps) => {
@@ -29,7 +29,15 @@ export const Portal = React.memo((inProps) => {
     const element = props.element || props.children;
 
     if (element && mountedState) {
-        const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo || document.body;
+        let appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo;
+
+        if (ObjectUtils.isFunction(appendTo)) {
+            appendTo = appendTo();
+        }
+
+        if (!appendTo) {
+            appendTo = document.body;
+        }
 
         return appendTo === 'self' ? element : ReactDOM.createPortal(element, appendTo);
     }
diff --git a/components/lib/sidebar/sidebar.d.ts b/components/lib/sidebar/sidebar.d.ts
index 7fca1a1014..5627c6ab98 100644
--- a/components/lib/sidebar/sidebar.d.ts
+++ b/components/lib/sidebar/sidebar.d.ts
@@ -161,7 +161,7 @@ export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and self. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}
diff --git a/components/lib/slidemenu/slidemenu.d.ts b/components/lib/slidemenu/slidemenu.d.ts
index 1accdf4847..b5eba8e670 100644
--- a/components/lib/slidemenu/slidemenu.d.ts
+++ b/components/lib/slidemenu/slidemenu.d.ts
@@ -143,7 +143,7 @@ export interface SlideMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Whether to automatically manage layering.
      * @defaultValue true
diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts
index 1d5f76137a..7afe012d5b 100644
--- a/components/lib/splitbutton/splitbutton.d.ts
+++ b/components/lib/splitbutton/splitbutton.d.ts
@@ -185,7 +185,7 @@ export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTM
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * Content of the tooltip.
      */
diff --git a/components/lib/tieredmenu/tieredmenu.d.ts b/components/lib/tieredmenu/tieredmenu.d.ts
index 38ad92e03f..2210eaa125 100644
--- a/components/lib/tieredmenu/tieredmenu.d.ts
+++ b/components/lib/tieredmenu/tieredmenu.d.ts
@@ -142,7 +142,7 @@ export interface TieredMenuProps extends Omit<React.DetailedHTMLProps<React.HTML
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}
diff --git a/components/lib/toast/toast.d.ts b/components/lib/toast/toast.d.ts
index 44a215704c..ec70aec268 100644
--- a/components/lib/toast/toast.d.ts
+++ b/components/lib/toast/toast.d.ts
@@ -239,7 +239,7 @@ export interface ToastProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      * DOM element instance where the component should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue self
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * Callback to invoke when an active tab is collapsed by clicking on the header.
      * @param {ToastMessage} message - Clicked message
diff --git a/components/lib/tooltip/tooltipoptions.d.ts b/components/lib/tooltip/tooltipoptions.d.ts
index f614f464a3..ce7db5af53 100644
--- a/components/lib/tooltip/tooltipoptions.d.ts
+++ b/components/lib/tooltip/tooltipoptions.d.ts
@@ -34,7 +34,7 @@ export interface TooltipOptions {
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * Defines which position on the target element to align the positioned tooltip.
      */
diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts
index 10a30ec2c4..df26a40f7e 100644
--- a/components/lib/treeselect/treeselect.d.ts
+++ b/components/lib/treeselect/treeselect.d.ts
@@ -351,7 +351,7 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Used to define a string that labels the component.
      */
diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts
index 46466297a4..ac836393b3 100644
--- a/components/lib/treetable/treetable.d.ts
+++ b/components/lib/treetable/treetable.d.ts
@@ -733,7 +733,7 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null;
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Content for the left side of the paginator.
      */