Skip to main content

Pivotal UI

Components / Portals


The Portal components render DOM nodes elsewhere on the page. This is useful for things like modals, tooltips, and dropdowns, when you want to define the content near the trigger, but have it display at the bottom of the page (generally to solve z-index and overflow incompatibilities).

For example, modals can be rendered at the bottom of <body>, but the React component that creates the modal content (e.g. a <button>) does not have access to <body> directly. If a PortalDestination is put at the bottom of <body>, a PortalSource can then be used anywhere without knowing about <body>.

Basic example
ReferenceError: React is not defined


nameyesStringUse same name to connect sources and destinations


Import React components (including CSS):

import {PortalSource, PortalDestination} from 'pivotal-ui/react/portals';