Utilities / Portal

Portal

Renders its content into document.body (or a custom container) so it escapes clipping and stacking ancestors.

Render through portal

overflow: hidden ancestor

razor

<div style="overflow: hidden">
    <NaviusPortal>
        <div class="fixed ...">Escapes the clip</div>
    </NaviusPortal>
</div>

Features

Physically relocates its node to document.body via the engine, escaping overflow: hidden, transforms, and z-index stacking contexts.
Self-contained: needs no service registration and no outlet. The overlay primitives use it internally.
A Container selector can target a different mount point.

Installation

Terminal bash

navius add portal

Anatomy

razor

@using Navius.Primitives.Portal

<NaviusPortal>
    @* teleported to document.body *@
</NaviusPortal>

API Reference

Root

Teleports its content to the body (or Container). Renders a display:contents wrapper.

Prop	Type	Default
Container	string?	document.body
ChildContent	RenderFragment?	-

There is also a legacy outlet-based API, NaviusPortalOutlet + PortalService (registered by AddNavius()), for rendering into a fixed point in the Blazor tree. NaviusPortal needs neither.

Accessibility

Portal moves DOM but preserves the accessibility tree and focus. There are no keyboard interactions of its own; the primitive that portals its content (Dialog, Popover, …) owns the focus and dismissal behaviour.