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>

Theme development

On your tailwind.config.js file, add the List component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        list: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*