The basic list group starts as a simple unordered list with list items. You can extend it using the options below or customize it further to suit your needs.

• Dropbox Cloud Storage
• Slack Team Collaboration
• Microsoft Windows OS
• Zendesk Customer Support
• Stripe Payment Integration

Use the active state to highlight the currently selected item in the list.

• GitHub Repository
• Figma Design Tool
• Notion Workspace
• Trello Task Manager
• DigitalOcean Cloud

Use the disabled state to visually indicate that a list item is unavailable or inactive.

• Dropbox Cloud Storage
• Slack Team Collaboration
• Microsoft Windows OS
• Zendesk Customer Support
• Stripe Payment Integration

Use interactive elements to create actionable list items that support hover, active, and disabled states.

Remove borders and rounded corners to allow list items to sit flush against the edges of their parent container, such as inside cards.

• Slack Collaboration Tool
• Dropbox Cloud Storage
• Notion Workspace Organizer
• Zendesk Customer Support
• Stripe Payment Processor

You can display list items horizontally instead of vertically. This layout can be applied across all screen sizes or enabled only at specific breakpoints.

• Slack
• Notion
• Dropbox

• Figma
• Stripe
• Zendesk

• Trello
• Asana
• ClickUp

Use contextual classes to style list items with a stateful background and color.

• Dapibus ac facilisis in
• A simple primary list group item
• A simple secondary list group item
• A simple success list group item
• A simple danger list group ite
• A simple warning list group item
• A simple info list group item
• A simple light list group item
• A simple dark list group item

Use contextual classes to style list items with a stateful background and color.

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

• Gmail Notifications 14
• Unprocessed Orders 2
• Urgent Tickets 99+
• Completed Transactions 20+
• Invoices Awaiting Approval 12

You can place checkboxes and radio buttons inside list items and customize them as needed. For accessibility, be sure to provide proper labels so assistive technologies can interpret them correctly.

List numbers are automatically generated and styled using a built-in counting system, ensuring consistent numbering and alignment for each item.

• 1.

  Admin Dashboard Pro

  A premium admin dashboard with modern UI components.
  865
• 2.

  Vue Admin Lite

  Clean and minimal admin panel built with Vue.js.
  140
• 3.

  Angular Admin Panel

  Lightweight and powerful Angular-based admin template. 85
  85