List

Report issue Edit this page

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>
    • List item 1
    • List item 2
    • List item 3

  • Something's not working? Feel free to report an issue or edit this snippet . 

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

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <ul className="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>

  • 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

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-5">
      <div>
        <h4 class="uk-h4">Disc</h4>
        <ul class="uk-list uk-list-disc mt-4">
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </div>
    

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

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

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

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

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-5">
      <div>
        <h4 className="uk-h4">Disc</h4>
        <ul className="uk-list uk-list-disc mt-4">
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </div>
      <div>
        <h4 className="uk-h4">Circle</h4>
        <ul className="uk-list uk-list-circle mt-4">
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </div>
      <div>
        <h4 className="uk-h4">Square</h4>
        <ul className="uk-list uk-list-square mt-4">
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </div>
      <div>
        <h4 className="uk-h4">Decimal</h4>
        <ul className="uk-list uk-list-decimal mt-4">
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </div>
      <div>
        <h4 className="uk-h4">Hyphen</h4>
        <ul className="uk-list uk-list-hyphen mt-4">
          <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>

  • Muted

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

    Primary

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

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-5">
      <div>
        <h4 class="uk-h4">Muted</h4>
        <ul class="uk-list uk-list-disc uk-list-muted mt-4">
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </div>
    

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

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-5">
      <div>
        <h4 className="uk-h4">Muted</h4>
        <ul className="uk-list uk-list-disc uk-list-muted mt-4">
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </div>
      <div>
        <h4 className="uk-h4">Primary</h4>
        <ul className="uk-list uk-list-disc uk-list-primary mt-4">
          <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>
    • List item 1
    • List item 2
    • List item 3

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <ul class="uk-list uk-list-bullet">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <ul className="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>
    • List item 1
    • List item 2
    • List item 3

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <ul class="uk-list uk-list-divider">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <ul className="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>
    • List item 1
    • List item 2
    • List item 3

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <ul class="uk-list uk-list-striped">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <ul className="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

Customize your Franken UI experience.