Ionic List

A list is a widely used interface element, almost always present in all mobile apps.

Lists can consist of basic text, buttons, switches, icons, and thumbnails.

List items can be any HTML element. The container element needs the list class, and each list item should use the item class.

ionList and ionItem easily support various interaction methods such as swipe editing, drag sorting, and deleting items.

Basic Usage:

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

Try it »

List Separators

We can use the item-divider class to create separators in the list. By default, list items are distinguished by different background colors and bold text, but you can easily customize them.

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

Try it »

List with Icons

We can specify icons on the left or right side of list items.

Use item-icon-left for icons on the left, and item-icon-right for icons on the right. If you need icons on both sides, add both classes.

In the following example, we use the <a> tag to make each list item clickable.

When using <a> or <button> elements for list items, an arrow will be automatically added to the right if no icon is specified.

In the example, the first item has only a left icon, the second item has icons on both sides, the third item has a right icon (plus a note), and the fourth item has a badge element.

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>

Try it »

Button List

Use item-button-right or item-button-left classes to place buttons within list items.

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios-telephone"></i>
    </button>
  </div>

  ...

</div>

Try it »

List with Avatars

Use item-avatar to create a list with avatars:

<div class="list">

    <a class="item item-avatar" href="#">
      <img decoding="async" src="venkman.jpg">
      <h2>Venkman</h2>

<div class="list">

<a class="item item-thumbnail-left" href="#">
  <img decoding="async" src="cover.jpg">
  <h2>Pretty Hate Machine</h2>
  <p>Nine Inch Nails</p>
</a>

...

</div>

[Try it Yourself »](../try/tryit.php?filename=ionic_list_item-thumbnail&basepath=0)

---

## Inset List

We can embed a list within a container, and the list will not display full width.

The style for an inset list is: list list-inset. The main difference from a regular list is that it sets margins, similar to a card.

Inset lists do not have shadow effects, which makes them look better when scrolling.

<div class="list list-inset">

<div class="item">
  Raiders of the Lost Ark
</div>

...

</div> ```

Try it Yourself »