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>

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.

Class	Description
`.uk-list-disc`	Use a filled circle as a marker.
`.uk-list-circle`	Use a hollow circle as marker.
`.uk-list-square`	Use a filled square as marker
`.uk-list-decimal`	Use decimal numbers as marker. Beginning with 1.
`.uk-list-hyphen`	Use 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

<div class="uk-child-width-expand@s" uk-grid>

    <div>
        <h4>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>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>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>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>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.

Class	Description
`.uk-list-muted`	Add this class to mute the marker.
`.uk-list-emphasis`	Add this class to emphasize the marker.
`.uk-list-primary`	Add this class to emphasize the marker with the primary color.
`.uk-list-secondary`	Add 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

Emphasis

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>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>Emphasis</h4>
        <ul class="uk-list uk-list-disc uk-list-emphasis">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>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>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>

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>

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>

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>

Size modifier

Add one of the following classes to increase or decrease the spacing between list items. You can combine this with any of the other list modifiers.

Class	Description
`.uk-list-large`	Increase the spacing between list items.
`.uk-list-collapse`	Remove the spacing between list items.

<ul class="uk-list uk-list-large">…</ul>

Large

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

Collapse

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

<h4>Large</h4>

<div class="uk-child-width-expand@s" uk-grid>

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

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

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

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

</div>

<h4>Collapse</h4>

<div class="uk-child-width-expand@s" uk-grid>

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

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

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

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

</div>

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>

Documentation