Portal is used to transport any component or element to the end of document.body and renders a React tree into it.

Useful for rendering a natural React element hierarchy with a different DOM hierarchy to prevent parent styles from clipping or hiding content (for popovers, dropdowns, and modals). It supports nested portals


import { Portal } from "@chakra-ui/react"


I'm here,
Editable Example

Using a custom container#

You can render the contents within a portal to a different DOM node, instead of the default document.body. Pass the containerRef prop and set its value to the ref of the container you'd like to use.

I'm here,
Container: Hey,
Editable Example

Nesting Portals#

You can also nest multiple portals within themselves, this will create a nested DOM hierarchy to make it easy to create nested modals, popovers, etc.

Editable Example

Opting out of portal nesting#

In some cases, you might not want portal nodes to be nested to their parent portals. To opt out of this, pass appendToParentPortal and set it to false

Editable Example


childrenrequiredReactNodeThe content or node you'll like to portal-
appendToParentPortalbooleanIf `true`, the portal will check if it is within a parent portal and append itself to the parent's portal node. This provides nesting for portals. If `false`, the portal will always append to `document.body` regardless of nesting. It is used to opt out of portal nesting.-
containerRefRefObject<HTMLElement | null>The `ref` to the component where the portal will be attached to.-