KTUIKTUI
KTUIKTUI
ComponentsDocsStudio

Getting Started

IntroductionInstallationApproachThemingJavaScriptTypeScriptDark modeRTLReferencesChangelog - v1.2.7Metronic TemplatePopular

Components

AccordionAvatarAlertBadgeBreadcrumbButtonCardUpdateCarouselNewClipboardNewCheckboxCollapseDatatableUpdateContext MenuNewDismissDrawerDropdownUpdateImage InputInputInput numberNewKbdLinkModalPaginationPin inputNewProgressRadio GroupRange SliderNewRatingNewReparentRepeaterNewScrollableScrollspyScrolltoSelectUpdateSeparatorUpdateSkeletonUpdateStepperStickySwitchTabsTextareaTheme SwitchToastTooltipToggleToggle GroupToggle Password
©2026 KtUI. All rights reserved.
A project by Keenthemes
Docs
Reparent

Reparent

Tailwind Reparent component enables responsive parent switching, allowing you to move elements to different containers at specific screen sizes.

Examples

Basic Usage

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

<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-kt-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 [--kt-reparent-mode:prepend] sm:[--kt-reparent-mode:prepend] [--kt-reparent-target:#parentOne] sm:[--kt-reparent-target:#parentTwo]"
      >
        Child content.
      </div>
    </div>
  </div>
</div>

Responsive

<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-kt-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 [--kt-reparent-mode:prepend] sm:[--kt-reparent-mode:prepend] md:[--kt-reparent-mode:prepend] [--kt-reparent-target:#reparent-responsive-a] sm:[--kt-reparent-target:#reparent-responsive-b] md:[--kt-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.KTReparent) return;
        document
          .querySelectorAll("[data-kt-reparent-initialized]")
          .forEach(function (el) {
            var inst = window.KTReparent.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.KTReparent) {
        init();
      } else {
        window.addEventListener("load", init);
      }
    })();
  </script>
</div>

Mobile Menu

<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">
      Desktop nav slot
    </div>
    <div
      id="reparent-desktop-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-kt-reparent="true"
        class="flex flex-wrap items-center gap-2 [--kt-reparent-mode:prepend] sm:[--kt-reparent-mode:prepend] [--kt-reparent-target:#reparent-mobile-menu] sm:[--kt-reparent-target:#reparent-desktop-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.KTReparent) return;
        document
          .querySelectorAll("[data-kt-reparent-initialized]")
          .forEach(function (el) {
            var inst = window.KTReparent.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.KTReparent) {
        init();
      } else {
        window.addEventListener("load", init);
      }
    })();
  </script>
</div>

Component API

Options

These data attributes allow you to set options for the reparent component during auto initialization.

OptionTypeDefaultDescription
data-kt-reparent-modeenum-Specifies the placement mode to determine whether the content is appended or prepended within the parent container per breakpoint.
data-kt-reparent-target

Selectors

This table details the custom classes and data attributes used by the accordion component.

NameDescription
Data Attributes
data-kt-reparent="true"Used to auto-initialize KTReparent instances on page load.

Methods

Use KTReparent component's API methods to programmatically control its behavior.

MethodDescription
new KTReparent(element, options)Creates an object instance of KTReparent class for the given DOM element and configuration options .
updates()Updates the elements parent.
getOption(name)Retrieves the value of a configuration option by name parameter from a KTReparent instance.
const reparentEl = document.querySelector('#my_reparent');
const reparent = KTReparent.getInstance(reparentEl);
 
reparent.update();

Utilities

Manage and interact with KTReparent instances using these static methods of KTReparent JavaScript class.

MethodDescription
init()Automatically initializes KTReparent object for all elements with the data-kt-reparent attribute on page load.
createInstances()Allows to create KTReparent instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element)Returns the KTReparent object associated with the given DOM element .
// Initialize all scrollables
KTReparent.init();
 
// Initialzie pending scrollables
KTReparent.createInstances();
 
// Get scrollable object
const reparentEl = document.querySelector('#my_reparent');
const reparent = KTReparent.getInstance(reparentEl);

TypeScript

Import the component and types from @keenthemes/ktui for typed options and instance:

import {
  KTReparent,
  type KTReparentConfigInterface,
  type KTReparentInterface,
} from '@keenthemes/ktui';
 
const reparentEl = document.querySelector<HTMLElement>('#my_reparent');
if (!reparentEl) return;
 
const reparent: KTReparentInterface | null = KTReparent.getInstance(reparentEl);
if (reparent) reparent.update();
 
const options: KTReparentConfigInterface = {};
const instance: KTReparentInterface = new KTReparent(reparentEl, options);

Events

PreviouseRatingNextRepeater

On This Page

  • Examples
    • Basic Usage
    • Responsive
    • Mobile Menu
  • Component API
    • Options
    • Selectors
    • Methods
    • Utilities
  • TypeScript
    • Events
string
-
Define parent elements per breakpoint.
getElement()
Retrieves the DOM element linked to a specific KTReparent instance.
on(eventName, handler)Allows attaching event listeners to the KTReparent custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTReparent. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId)Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose()Removes the KTReparent instance from an element, including any associated data stored on the DOM element.
element
getOrCreateInstance(element)Returns the existing KTReparent object for the provided DOM element element , or creates a new instance if none exists, then returns the same.