@@ -78,6 +78,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 * If you want to disable dynamic positioning set this property to `true`.
 */
 popper?: boolean
+/**
+* Generates dropdown menu using createPortal.
+*
+* @since 4.8.0
+*/
+portal?: boolean
 /**
 * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
 */
@@ -88,20 +94,15 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 visible?: boolean
 }
 
-const PopperManagerWrapper = ({
-children,
-popper,
-}: {
-children: ReactNode
-popper: boolean
-}) => {
+const PopperManagerWrapper = ({ children, popper }: { children: ReactNode; popper: boolean }) => {
 return popper ? <Manager>{children}</Manager> : <>{children}</>
 }
 
 interface ContextProps extends CDropdownProps {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 dropdownToggleRef: RefObject<any> | undefined
 setVisible: React.Dis<React.SetStateAction<boolean | undefined>>
+portal: boolean
 }
 
 export const CDropdownContext = createContext({} as ContextProps)
@@ -119,6 +120,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 onShow,
 placement = 'bottom-start',
 popper = true,
+portal = false,
 variant = 'btn-group',
 component = 'div',
 visible = false,
@@ -146,6 +148,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 dropdownToggleRef,
 placement: placement,
 popper,
+portal: portal,
 variant,
 visible: _visible,
 setVisible,
@@ -172,7 +175,8 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 {
 'dropdown-center': direction === 'center',
 'dropup dropup-center': direction === 'dropup-center',
-[`${direction}`]: direction && direction !== 'center' && direction !== 'dropup-center',
+[`${direction}`]:
+direction && direction !== 'center' && direction !== 'dropup-center',
 show: _visible,
 },
 className,
@@ -215,6 +219,7 @@ CDropdown.propTypes = {
 onShow: PropTypes.func,
 placement: placementPropType,
 popper: PropTypes.bool,
+portal: PropTypes.bool,
 variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
 visible: PropTypes.bool,
 }

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
 import { Alignments, CDropdownContext } from './CDropdown'
+import { CConditionalPortal } from '../conditional-portal'
 
 import type { Placements } from '../../types'
 
@@ -30,6 +31,21 @@ export interface CDropdownMenuProps
 component?: string | ElementType
 }
 
+const alignmentClassNames = (alignment: Alignments) => {
+const classNames: string[] = []
+if (typeof alignment === 'object') {
+Object.keys(alignment).map((key) => {
+classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
+})
+}
+
+if (typeof alignment === 'string') {
+classNames.push(`dropdown-menu-${alignment}`)
+}
+
+return classNames
+}
+
 export const CDropdownMenu: FC<CDropdownMenuProps> = ({
 children,
 className,
@@ -44,6 +60,7 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
 dropdownToggleRef,
 placement,
 popper,
+portal,
 visible,
 setVisible,
 } = useContext(CDropdownContext)
@@ -111,48 +128,35 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
 _placement = 'bottom-end'
 }
 
-const alignmentClassNames = (alignment: Alignments) => {
-const classNames: string[] = []
-if (typeof alignment === 'object') {
-Object.keys(alignment).map((key) => {
-classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-})
-}
-
-if (typeof alignment === 'string') {
-classNames.push(`dropdown-menu-${alignment}`)
-}
-
-return classNames
-}
-
 const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (
-<Component
-className={classNames(
-'dropdown-menu',
-{
-'dropdown-menu-dark': dark,
-show: visible,
-},
-alignment && alignmentClassNames(alignment),
-className,
-)}
-ref={ref}
-style={style}
-role="menu"
-aria-hidden={!visible}
-{...(!popper && { 'data-coreui-popper': 'static' })}
-{...rest}
->
-{Component === 'ul'
-? React.Children.map(children, (child, index) => {
-if (React.isValidElement(child)) {
-return <li key={index}>{React.cloneElement(child)}</li>
-}
-return
-})
-: children}
-</Component>
+<CConditionalPortal portal={portal ?? false}>
+<Component
+className={classNames(
+'dropdown-menu',
+{
+'dropdown-menu-dark': dark,
+show: visible,
+},
+alignment && alignmentClassNames(alignment),
+className,
+)}
+ref={ref}
+style={style}
+role="menu"
+aria-hidden={!visible}
+{...(!popper && { 'data-coreui-popper': 'static' })}
+{...rest}
+>
+{Component === 'ul'
+? React.Children.map(children, (child, index) => {
+if (React.isValidElement(child)) {
+return <li key={index}>{React.cloneElement(child)}</li>
+}
+return
+})
+: children}
+</Component>
+</CConditionalPortal>
 )
 
 return popper && visible ? (

@@ -17,5 +17,6 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
 | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
 | **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start |
 | **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true |
+| **portal** **_4.8.0+_** | Generates dropdown menu using createPortal. | `boolean` | false |
 | **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | `'btn-group'` \| `'dropdown'` \| `'input-group'` \| `'nav-item'` | btn-group |
 | **visible** | Toggle the visibility of dropdown menu component. | `boolean` | false |