ul

The unordered list element represents a collection of items where the sequence does not matter.

Description

The <ul> element creates a bulleted list of items. Each item is wrapped in an <li> element. Use unordered lists when the order of items is not meaningful or does not affect the content's meaning.

By default, items are displayed with disc-style bullet markers and left padding for indentation.

Semantic Meaning

An unordered list conveys that:

  • The content is a collection of related items
  • The order of items is not significant
  • Items can be rearranged without changing the meaning

Screen readers announce the list and item count, helping users understand content structure.

When to Use

  • Feature lists or bullet points
  • Navigation menus (wrap in <nav>)
  • Collections of links or resources
  • Shopping lists or item inventories
  • Tag or category listings
  • Any group where sequence does not matter

When Not to Use

  • For sequential steps or ranked items - use <ol>
  • For term-definition pairs - use <dl>
  • For tabular data - use <table>

Default

Standard unordered list with bullet markers.

  • First item in the list
  • Second item in the list
  • Third item in the list
  • Fourth item in the list
<ul> <li>First item in the list</li> <li>Second item in the list</li> <li>Third item in the list</li> <li>Fourth item in the list</li> </ul>

Variants

.inline

Display list items horizontally using flexbox. Removes bullets and arranges items in a row with gap spacing.

  • Home
  • About
  • Services
  • Contact
<ul class="inline"> <li>Home</li> <li>About</li> <li>Services</li> <li>Contact</li> </ul>

.unstyled

Remove bullets and indentation for custom styling or navigation menus.

  • No bullets here
  • Just plain text
  • Useful for navigation
  • Or custom layouts
<ul class="unstyled"> <li>No bullets here</li> <li>Just plain text</li> <li>Useful for navigation</li> <li>Or custom layouts</li> </ul>

Nested Lists

Lists can be nested to create hierarchical structures. Nested lists automatically change their bullet style at each level.

  • Fruits
    • Apples
    • Oranges
    • Bananas
  • Vegetables
    • Carrots
    • Broccoli
  • Grains
<ul> <li>Fruits <ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul> </li> <li>Vegetables <ul> <li>Carrots</li> <li>Broccoli</li> </ul> </li> <li>Grains</li> </ul>

Navigation Usage

Unordered lists are commonly used for navigation menus. Wrap the list in a <nav> element for proper semantics.

<nav aria-label="Example navigation"> <ul class="unstyled"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

Accessibility

Screen Reader Behavior

  • Announced as "list" with item count (e.g., "list, 4 items")
  • Each item announced as "list item" with position
  • Nested lists are announced with their own item counts

Best Practices

  • Use semantic list markup instead of styled divs for list content
  • Do not remove list semantics with role="presentation" unless intentional
  • For navigation, wrap in <nav> with aria-label
  • Keep list items concise and scannable
  • Avoid deeply nested lists (3+ levels) as they become hard to navigate

ARIA Considerations

The .unstyled class removes visual bullets but preserves list semantics. In Safari/VoiceOver, list-style: none may remove list semantics. To preserve them explicitly:

<ul class="unstyled" role="list"> <li>Item with explicit list role</li> </ul>

CSS Properties

Property Value Description
padding-inline-start var(--size-l) Left indentation for list items

Variant: .inline

Property Value
display flex
flex-wrap wrap
gap var(--size-s)
list-style none

Variant: .unstyled

Property Value
padding-inline-start 0
list-style none

Related Elements

  • <ol> - Ordered list for sequential items
  • <li> - List item element (required child)
  • <dl> - Definition list for term-description pairs
  • <nav> - Navigation landmark for menu lists