Popover

<NaviusPopover @bind-Open="_open">
    <NaviusPopoverTrigger class="... data-[popup-open]:bg-accent">
        Dimensions
    </NaviusPopoverTrigger>

    <NaviusPopoverPositioner Side="bottom" SideOffset="8">
        <NaviusPopoverPopup
            class="... w-72 bg-popover text-popover-foreground shadow-md">
            <h4 class="text-sm font-medium">Dimensions</h4>
            <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
            <!-- width / height inputs … -->

            <NaviusPopoverClose aria-label="Close" class="absolute right-3 top-3">✕</NaviusPopoverClose>
            <NaviusPopoverArrow class="fill-popover" />
        </NaviusPopoverPopup>
    </NaviusPopoverPositioner>
</NaviusPopover>

@code { private bool _open; }

Features

• Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
• Smart positioning anchored to the trigger, flipping and shifting to stay in view.
• Portals content to document.body to escape overflow and stacking contexts.
• Dismisses on outside pointer-down and Escape; every dismissal is cancelable.
• Optional Modal mode that traps focus and locks page scroll.
• Manages focus on open and restores it to the trigger on close.

Installation

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

navius add popover

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.Popover

<NaviusPopover>
    <NaviusPopoverTrigger />
    <NaviusPopoverAnchor />

    <NaviusPopoverPositioner>
        <NaviusPopoverPopup>
            <NaviusPopoverClose />
            <NaviusPopoverArrow />
        </NaviusPopoverPopup>
    </NaviusPopoverPositioner>
</NaviusPopover>

API Reference

Root

Contains all the parts of a popover. Owns open state and cascades context; renders no DOM.

Trigger

The button that toggles the popover and anchors its positioning. Renders a button.

Data attributes

Anchor

An optional explicit positioning reference. When present, the content anchors to it instead of the trigger. Renders a div.

Data attributes

Portal

Teleports the content into document.body (or a custom container) so it escapes overflow clipping. Renders a div wrapper.

Data attributes

Popup

The floating panel, wrapped by the Positioner and dismissable on outside-press / Escape. Self-portals; renders a div with role=dialog. The Side / Align / SideOffset / AlignOffset / Flip / AvoidCollisions / CollisionPadding / Sticky / HideWhenDetached / ArrowPadding props are set on the enclosing Positioner.

Data attributes

Arrow

An optional arrow pointing at the anchor, placed and rotated by the positioner. Renders an svg inside a span.

Data attributes

Close

A button inside the content that closes the popover. Renders a button.

Data attributes

Accessibility

Implements the Dialog WAI-ARIA APG pattern: the trigger carries aria-haspopup="dialog", aria-expanded, and aria-controls wired to the content's role="dialog". This is covered by the browser test suite and an axe-core WCAG gate in CI.

Keyboard interactions