Reparent · Panel

Basic Usage

Resize your browser or the preview panel to see content switch parents based on breakpoint-prefixed data-mv-reparent-target and data-mv-reparent-mode values (or matching CSS custom properties).

Parent 1 default

Parent 2 sm

Child content.

<div class="space-y-5">
  <div class="flex flex-col items-center gap-3 border border-green-500 p-6 rounded-lg">
    <div class="flex items-center gap-1 text-gray-900 dark:text-white font-semibold text-base">
      Parent 1<!-- -->
      <code class="px-2 py-1 text-xs leading-none font-medium text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-600 border border-transparent rounded-md inline-flex items-center">default</code>
    </div>
    <div id="parentOne"></div>
  </div>
  <div class="flex flex-col items-center gap-3 border border-yellow-500 p-6 rounded-lg">
    <div class="flex items-center gap-1 text-gray-900 dark:text-gray-100 font-semibold text-base">
      Parent 2<!-- -->
      <code class="px-2 py-1 text-xs leading-none font-medium text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-600 border border-transparent rounded-md inline-flex items-center">sm</code>
    </div>
    <div id="parentTwo">
      <div data-mv-reparent="true" class="border-2 border-dashed border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-medium rounded-lg p-6 [--mv-reparent-mode:prepend] sm:[--mv-reparent-mode:prepend] [--mv-reparent-target:#parentOne] sm:[--mv-reparent-target:#parentTwo]">
        Child content.
      </div>
    </div>
  </div>
</div>

Responsive

Drag the preview edge to resize. Content reparents between the labeled slots at default, sm, and md breakpoints.

Parent A default

Parent B sm

Parent C md

Reparented content moves between Parent A, B, and C as the preview width changes.

<div class="space-y-5">
  <p class="text-sm text-muted-foreground">
    Drag the preview edge to resize. Content reparents between the labeled slots
    at<!-- -->
    <code class="text-foreground">default</code>,
    <code class="text-foreground">sm</code>, and<!-- -->
    <code class="text-foreground">md</code> breakpoints.
  </p>
  <div class="flex flex-col items-stretch gap-3 border border-green-500 p-6 rounded-lg">
    <div class="flex items-center gap-1 font-semibold text-base text-gray-900 dark:text-white">
      Parent A<!-- -->
      <code class="px-2 py-1 text-xs leading-none font-medium text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-600 border border-transparent rounded-md inline-flex items-center">default</code>
    </div>
    <div id="reparent-responsive-a" class="min-h-20 w-full rounded-lg border border-dashed border-green-500"></div>
  </div>
  <div class="flex flex-col items-stretch gap-3 border border-blue-500 p-6 rounded-lg">
    <div class="flex items-center gap-1 font-semibold text-base text-gray-900 dark:text-white">
      Parent B<!-- -->
      <code class="px-2 py-1 text-xs leading-none font-medium text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-600 border border-transparent rounded-md inline-flex items-center">sm</code>
    </div>
    <div id="reparent-responsive-b" class="min-h-20 w-full rounded-lg border border-dashed border-blue-500"></div>
  </div>
  <div class="flex flex-col items-stretch gap-3 border border-yellow-500 p-6 rounded-lg">
    <div class="flex items-center gap-1 font-semibold text-base text-gray-900 dark:text-gray-100">
      Parent C<!-- -->
      <code class="px-2 py-1 text-xs leading-none font-medium text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-600 border border-transparent rounded-md inline-flex items-center">md</code>
    </div>
    <div id="reparent-responsive-c" class="min-h-20 w-full rounded-lg border border-dashed border-yellow-500">
      <div data-mv-reparent="true" class="border-2 border-dashed border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-medium rounded-lg p-6 [--mv-reparent-mode:prepend] sm:[--mv-reparent-mode:prepend] md:[--mv-reparent-mode:prepend] [--mv-reparent-target:#reparent-responsive-a] sm:[--mv-reparent-target:#reparent-responsive-b] md:[--mv-reparent-target:#reparent-responsive-c]">
        Reparented content moves between Parent A, B, and C as the preview width
        changes.
      </div>
    </div>
  </div>
  <script>
    (function () {
      function refreshReparent() {
        if (!window.MVReparent) return;
        document
          .querySelectorAll("[data-mv-reparent-initialized]")
          .forEach(function (el) {
            var inst = window.MVReparent.getInstance(el);
            if (inst) inst.update();
          });
      }

      function init() {
        refreshReparent();
        window.addEventListener("resize", refreshReparent);
        if (typeof ResizeObserver !== "undefined") {
          new ResizeObserver(refreshReparent).observe(document.documentElement);
        }
      }

      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
      } else if (window.MVReparent) {
        init();
      } else {
        window.addEventListener("load", init);
      }
    })();
  </script>
</div>

Mobile Menu

Both slots stay visible. Drag the preview edge to resize — below sm the shared nav moves into the mobile slot; at sm+ it moves into the header slot.

Acme Inc.

☰ Menu

DesMVop nav slot

Mobile menu slot

<div class="space-y-4">
  <p class="text-sm text-muted-foreground">
    Both slots stay visible. Drag the preview edge to resize — below<!-- -->
    <code class="text-foreground">sm</code> the shared nav moves into the mobile
    slot; at<!-- -->
    <code class="text-foreground">sm+</code> it moves into the header slot.
  </p>
  <div class="rounded-lg border border-border bg-muted/20 p-4">
    <div class="mb-3 flex items-center justify-between gap-4">
      <div class="text-sm font-semibold text-mono">Acme Inc.</div>
      <div class="text-xs text-muted-foreground">☰ Menu</div>
    </div>
    <div class="mb-2 text-xs font-medium text-blue-700 dark:text-blue-300">
      DesMVop nav slot
    </div>
    <div id="reparent-desMVop-nav" class="flex min-h-14 w-full flex-wrap items-center gap-2 rounded-md border border-dashed px-3 py-2 border-blue-500 bg-blue-500/5"></div>
  </div>
  <div class="rounded-lg border border-border bg-muted/20 p-4">
    <div class="mb-2 text-xs font-medium text-orange-700 dark:text-orange-300">
      Mobile menu slot
    </div>
    <div id="reparent-mobile-menu" class="flex min-h-14 w-full flex-wrap items-center gap-2 rounded-md border border-dashed px-3 py-2 border-orange-500 bg-orange-500/5">
      <div data-mv-reparent="true" class="flex flex-wrap items-center gap-2 [--mv-reparent-mode:prepend] sm:[--mv-reparent-mode:prepend] [--mv-reparent-target:#reparent-mobile-menu] sm:[--mv-reparent-target:#reparent-desMVop-nav]">
        <a href="#" class="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-primary">Dashboard</a><a href="#" class="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-primary">Projects</a><a href="#" class="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-primary">Team</a><a href="#" class="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-primary">Settings</a>
      </div>
    </div>
  </div>
  <script>
    (function () {
      function refreshReparent() {
        if (!window.MVReparent) return;
        document
          .querySelectorAll("[data-mv-reparent-initialized]")
          .forEach(function (el) {
            var inst = window.MVReparent.getInstance(el);
            if (inst) inst.update();
          });
      }

      function init() {
        refreshReparent();
        window.addEventListener("resize", refreshReparent);
        if (typeof ResizeObserver !== "undefined") {
          new ResizeObserver(refreshReparent).observe(document.documentElement);
        }
      }

      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
      } else if (window.MVReparent) {
        init();
      } else {
        window.addEventListener("load", init);
      }
    })();
  </script>
</div>