Mobile-friendly Lists

The mobile-lists component makes unordered and ordered list elements full-width and taller for easier touch-clicking.

Just add the mobile-list class to your ul or ol element.

With Icons

Want icons in your unordered list? Just tack on the with-icons class to your element, and place your icons inside the list links.

The icons above are from the Foundation Icons font set.

With Chevrons

Need a chevron at the end of your list item? Add the with-chevrons class to your element, and add this inside your li element:

<i class="chevron"></i>


Want a rounded list? Add the round class to your ul or ol element.

List Dividers

Sometimes, you may have lists sub-divided into groups of list elements. Foundation Mobile includes some default styles for li elements within mobile-lists with the list-divider class.

Split List Elements

For split list items, add the split-list class to your ul or ol element, and then use Foundation's standard grid inside your li elements.

You may also nest a grid inside one of the links. Below, we have a table with two columns within the first link.


If you want to use list dividers in a split-list, you must add a div with the row class within the li elements, instead of adding the row class to the li elements directly.

This is due to CSS display: table-cell's lack of a colspan property. If using the row class directly on the li elements, the list-divider could only span the width of the first split-list column.