List

Easily create nice looking lists, which come in different styles.

Usage

To apply this component, add the .uk-list class to an unordered or ordered list. The list will now display without any spacing or list-style.

<ul class="uk-list">
  <li></li>
  <li></li>
  <li></li>
</ul>
Copy to clipboard
    • List item 1
    • List item 2
    • List item 3
  • <ul class="uk-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Style type modifiers

Add one of the following classes to set the marker of a list item.

ClassDescription
.uk-list-discUse a filled circle as a marker.
.uk-list-circleUse a hollow circle as marker.
.uk-list-squareUse a filled square as marker
.uk-list-decimalUse decimal numbers as marker. Beginning with 1.
.uk-list-hyphenUse a hyphen as marker
<ul class="uk-list uk-list-disc">
  …
</ul>
Copy to clipboard

  • Disc

    • List item 1
    • List item 2
    • List item 3

    Circle

    • List item 1
    • List item 2
    • List item 3

    Square

    • List item 1
    • List item 2
    • List item 3

    Decimal

    • List item 1
    • List item 2
    • List item 3

    Hyphen

    • List item 1
    • List item 2
    • List item 3
  • <div class="uk-child-width-expand@s" uk-grid>
  <div>
    <h4 class="uk-h4 uk-margin">Disc</h4>
    <ul class="uk-list uk-list-disc">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>

  <div>
    <h4 class="uk-h4 uk-margin">Circle</h4>
    <ul class="uk-list uk-list-circle">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>

  <div>
    <h4 class="uk-h4 uk-margin">Square</h4>
    <ul class="uk-list uk-list-square">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>

  <div>
    <h4 class="uk-h4 uk-margin">Decimal</h4>
    <ul class="uk-list uk-list-decimal">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>

  <div>
    <h4 class="uk-h4 uk-margin">Hyphen</h4>
    <ul class="uk-list uk-list-hyphen">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>

Color modifiers

Add one of the following classes to set the marker color.

ClassDescription
.uk-list-mutedAdd this class to mute the marker.
.uk-list-primaryAdd this class to emphasize the marker with the primary color.
.uk-list-secondaryAdd this class to emphasize the marker with the secondary color.
<ul class="uk-list uk-list-disc uk-list-primary">
  …
</ul>
Copy to clipboard

  • Muted

    • List item 1
    • List item 2
    • List item 3

    Primary

    • List item 1
    • List item 2
    • List item 3

    Secondary

    • List item 1
    • List item 2
    • List item 3
  • <div class="uk-child-width-expand@s" uk-grid>
  <div>
    <h4 class="uk-h4 uk-margin">Muted</h4>
    <ul class="uk-list uk-list-disc uk-list-muted">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>

  <div>
    <h4 class="uk-h4 uk-margin">Primary</h4>
    <ul class="uk-list uk-list-disc uk-list-primary">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>

  <div>
    <h4 class="uk-h4 uk-margin">Secondary</h4>
    <ul class="uk-list uk-list-disc uk-list-secondary">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>

Image bullet modifier

Add the .uk-list-bullet class to set a custom image bullet as a marker of a list item. Mind, that it can not be combined with color modifiers.

<ul class="uk-list uk-list-bullet">
  …
</ul>
Copy to clipboard
    • List item 1
    • List item 2
    • List item 3
  • <ul class="uk-list uk-list-bullet">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Divider modifier

Add the .uk-list-divider class to separate list items with lines.

<ul class="uk-list uk-list-divider">
  …
</ul>
Copy to clipboard
    • List item 1
    • List item 2
    • List item 3
  • <ul class="uk-list uk-list-divider">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Striped modifier

Add zebra-striping to a list using the .uk-list-striped class.

<ul class="uk-list uk-list-striped">
  …
</ul>
Copy to clipboard
    • List item 1
    • List item 2
    • List item 3
  • <ul class="uk-list uk-list-striped">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Accessibility

Set the appropriate WAI-ARIA roles, states and properties to the List component.

  • If a <div> element is used, set the list role to the list, and the listitem role to the list items.
<div class="uk-list" role="list">
  <div role="listitem">List item 1</div>
  <div role="listitem">List item 2</div>
  <div role="listitem">List item 3</div>
</div>
Customize