Skip to main content


Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an ion-reorder-group to provide a visual drag and drop interface.

ion-reorder is the anchor used to drag and drop the items inside of the ion-reorder-group. See the Reorder Group for more information on how to complete the reorder operation.


<!-- The reorder gesture is disabled by default, enable it to drag and drop items --><ion-reorder-group disabled="false">  <!-- Default reorder icon, end aligned items -->  <ion-item>    <ion-label>      Item 1    </ion-label>    <ion-reorder slot="end"></ion-reorder>  </ion-item>
  <ion-item>    <ion-label>      Item 2    </ion-label>    <ion-reorder slot="end"></ion-reorder>  </ion-item>
  <!-- Default reorder icon, start aligned items -->  <ion-item>    <ion-reorder slot="start"></ion-reorder>    <ion-label>      Item 3    </ion-label>  </ion-item>
  <ion-item>    <ion-reorder slot="start"></ion-reorder>    <ion-label>      Item 4    </ion-label>  </ion-item>
  <!-- Custom reorder icon end items -->  <ion-item>    <ion-label>      Item 5    </ion-label>    <ion-reorder slot="end">      <ion-icon name="pizza"></ion-icon>    </ion-reorder>  </ion-item>
  <ion-item>    <ion-label>      Item 6    </ion-label>    <ion-reorder slot="end">      <ion-icon name="pizza"></ion-icon>    </ion-reorder>  </ion-item>
  <!-- Items wrapped in a reorder, entire item can be dragged -->  <ion-reorder>    <ion-item>      <ion-label>        Item 7      </ion-label>    </ion-item>  </ion-reorder>
  <ion-reorder>    <ion-item>      <ion-label>        Item 8      </ion-label>    </ion-item>  </ion-reorder></ion-reorder-group>

CSS Shadow Parts#

iconThe icon of the reorder handle (uses ion-icon).
View Source