CSS-Only

List Group

Flexible list component for displaying series of content, navigation, or actions. Pure CSS with no JavaScript required.

Example

  • First item
  • Second item
  • Third item
  • Fourth item
  • Fifth item
<ul class="omni-list-group">
  <li class="omni-list-group-item">First item</li>
  <li class="omni-list-group-item">Second item</li>
  <li class="omni-list-group-item">Third item</li>
  <li class="omni-list-group-item">Fourth item</li>
  <li class="omni-list-group-item">Fifth item</li>
</ul>

Interactive Items

Links

Use <a> elements for navigation:

<nav class="omni-list-group" aria-label="Main navigation">
  <a href="#" class="omni-list-group-item">Dashboard</a>
  <a href="#" class="omni-list-group-item" data-active="true">Settings</a>
  <a href="#" class="omni-list-group-item">Profile</a>
  <a href="#" class="omni-list-group-item">Messages</a>
  <a href="#" class="omni-list-group-item" data-disabled="true">Disabled Link</a>
</nav>

Buttons

Use <button> elements for actions:

<div class="omni-list-group">
  <button class="omni-list-group-item">Save changes</button>
  <button class="omni-list-group-item">Export data</button>
  <button class="omni-list-group-item">Import settings</button>
  <button class="omni-list-group-item" data-disabled="true">Unavailable action</button>
</div>

Variants

Flush

Use data-variant="flush" to remove borders and rounded corners, ideal for cards or sidebars:

<div class="omni-card">
  <nav class="omni-list-group" data-variant="flush" aria-label="Card navigation">
    <a href="#" class="omni-list-group-item">Overview</a>
    <a href="#" class="omni-list-group-item" data-active="true">Analytics</a>
    <a href="#" class="omni-list-group-item">Reports</a>
    <a href="#" class="omni-list-group-item">Export</a>
  </nav>
</div>

Small Size

Use data-size="sm" for compact lists:

  • Compact item
  • Compact item
  • Compact item
  • Compact item
<ul class="omni-list-group" data-size="sm">
  <li class="omni-list-group-item">Compact item</li>
  <li class="omni-list-group-item">Compact item</li>
  <li class="omni-list-group-item">Compact item</li>
  <li class="omni-list-group-item">Compact item</li>
</ul>

States

Active

Use data-active="true" to highlight the current item:

Disabled

Use data-disabled="true" to disable interaction:

Rich Content

List items can contain complex markup like headings, badges, and icons:

System Update Available

Version 2.4.1 is ready to install

New
Security Patch

Critical security updates included

Critical
Performance Improvements

Faster load times and better responsiveness

Applied 
<div class="omni-list-group">
  <div class="omni-list-group-item">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <strong>System Update Available</strong>
        <p>Version 2.4.1 is ready to install</p>
      </div>
      <span class="omni-badge" data-variant="info">New</span>
    </div>
  </div>
  <!-- More items... -->
</div>

Common Use Cases

Settings Menu

Download List

  • Project Report Q4 2025.pdf

    2.4 MB · Modified 2 hours ago

  • Financial Summary.xlsx

    1.8 MB · Modified yesterday

  • Team Photos.zip

    15.3 MB · Modified 3 days ago

API Reference

List Group Container

Attribute Values Default Description
data-variant flush — Removes borders and rounded corners
data-size sm md Controls padding and font size of items

List Group Items

Attribute Values Default Description
data-active true — Highlights item as current/selected
data-disabled true — Disables interaction and mutes appearance

HTML Elements

List groups work with various HTML elements:

  • <ul> or <ol> with <li> items for static content
  • <nav> with <a> items for navigation
  • <div> with <button> items for actions
  • <div> with <div> items for custom content

Accessibility

  • Use semantic HTML elements (<ul>, <nav>, <button>, <a>)
  • Include aria-label on <nav> elements to describe the navigation purpose
  • Use data-active="true" on the current page/item for navigation lists
  • Interactive items (<a>, <button>) have proper focus indicators
  • Disabled items prevent interaction with pointer-events: none
  • Full keyboard navigation support (Tab, Enter, Space for buttons)
  • Logical properties ensure proper RTL language support
  • Sufficient color contrast for text and interactive states

Components Used

Other OmniUI components demonstrated on this page:

Badge Button Card