Skip to content

Overview

The <x-aura::list> component renders a styled unordered list with optional dividers and visual variants. Each <x-aura::list.item> supports an optional leading icon. Use it for navigation menus, feature lists, settings groups, or any structured list of items.

Basic Usage

  • First item
  • Second item
  • Third item 
<x-aura::list>
    <x-aura::list.item>First item</x-aura::list.item>
    <x-aura::list.item>Second item</x-aura::list.item>
    <x-aura::list.item>Third item</x-aura::list.item>
</x-aura::list>

Props

List

Prop Type Default Description
variant string 'default' Visual style: default, bordered, flush.
divided bool false Show divider lines between items.

List Item

Prop Type Default Description
icon string|null null Icon name displayed before the item text.

Variants / Examples

With Icons

  • Feature one included
  • Feature two included
  • Feature three not included 
<x-aura::list>
    <x-aura::list.item icon="check">Feature one included</x-aura::list.item>
    <x-aura::list.item icon="check">Feature two included</x-aura::list.item>
    <x-aura::list.item icon="x">Feature three not included</x-aura::list.item>
</x-aura::list>

Divided List

  • Profile settings
  • Notification preferences
  • Security options
  • Billing information 
<x-aura::list :divided="true">
    <x-aura::list.item icon="user">Profile settings</x-aura::list.item>
    <x-aura::list.item icon="bell">Notification preferences</x-aura::list.item>
    <x-aura::list.item icon="shield">Security options</x-aura::list.item>
    <x-aura::list.item icon="credit-card">Billing information</x-aura::list.item>
</x-aura::list>

Bordered Variant

  • Favorites
  • Recent
  • Archived 
<x-aura::list variant="bordered" :divided="true">
    <x-aura::list.item icon="star">Favorites</x-aura::list.item>
    <x-aura::list.item icon="clock">Recent</x-aura::list.item>
    <x-aura::list.item icon="archive">Archived</x-aura::list.item>
</x-aura::list>

Flush Variant

  • No padding or border on the outer edges
  • Flush to the container
  • Only dividers between items 
<x-aura::list variant="flush" :divided="true">
    <x-aura::list.item>No padding or border on the outer edges</x-aura::list.item>
    <x-aura::list.item>Flush to the container</x-aura::list.item>
    <x-aura::list.item>Only dividers between items</x-aura::list.item>
</x-aura::list>

Accessibility

  • The list renders as a semantic <ul> with <li> items for proper screen reader support.
  • Icons are decorative and marked with aria-hidden="true".
  • List items support any interactive content (links, buttons) with proper keyboard navigation.