Portal

Portal renders its children into a DOM node outside the parent hierarchy, escaping overflow clipping and stacking contexts. Inside a dialog or drawer it renders into that modal's own container, so portaled content stacks above the overlay and stays interactive; elsewhere it appends to the end of document.body.

#Example

Wrap overlay content that would otherwise be clipped by a scrolling or overflow: hidden ancestor:

#Guidelines

#When to use

• When overlay content (popover, custom dropdown) is clipped by an ancestor with overflow or trapped under another element by a stacking context.
• When rendering overlay content from within a dialog or drawer — this portal targets the modal's container, so the content remains above the overlay and receives clicks.
• Direct use should be rare — nearly all overlay needs are covered by the existing design-system components.

#When not to use

• If an existing overlay component fits — Dialog, Drawer, Menu, Popover, Select, Tooltip — use it instead; they already portal their overlays, so don't wrap them again.
• For content that positions itself relative to normal document flow; portaled content needs its own positioning.

#API

Chakra Docs