Qwik list-group - Flowbite

Use the list group component to display a series of items, buttons or links inside a single element

The list group component can be used to show a list of items inside of an unordered list for website navigation, show a list of items inside of a card, and more.

You can choose from one of the examples below based on various styles and options and you can customize the component with Qwik props and the classes from Tailwind CSS.

Start using the list group component by first importing it from flowbite-qwik :

import { ListGroup } from "flowbite-qwik"

Default list group

Use the default example to create a simple list of items inside a menu by using the ListGroup component with ListGroup.Item child components inside of it.

tsx
import { component$ } from '@builder.io/qwik'
import { ListGroup } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex justify-center">
      <ListGroup class="w-48">
        <ListGroup.Item>Profile</ListGroup.Item>
        <ListGroup.Item>Settings</ListGroup.Item>
        <ListGroup.Item>Messages</ListGroup.Item>
        <ListGroup.Item disabled>Download</ListGroup.Item>
      </ListGroup>
    </div>
  )
})

List items as links

Convert the list items into links by adding the href prop to the ListGroup.Item component, first item has the active prop

tsx
import { component$ } from '@builder.io/qwik'
import { ListGroup } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex justify-center">
      <ListGroup class="w-48">
        <ListGroup.Item href="#" active>
          Profile
        </ListGroup.Item>
        <ListGroup.Item href="#">Settings</ListGroup.Item>
        <ListGroup.Item href="#">Messages</ListGroup.Item>
        <ListGroup.Item href="#">Download</ListGroup.Item>
      </ListGroup>
    </div>
  )
})

List group with buttons

To create custom actions inside the list group, use the onClick$ prop on the ListGroup.Item component.

tsx
import { component$ } from '@builder.io/qwik'
import { ListGroup } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex justify-center">
      <ListGroup class="w-48">
        <ListGroup.Item onClick$={() => alert('Profile clicked!')} active>
          Profile
        </ListGroup.Item>
        <ListGroup.Item>Settings</ListGroup.Item>
        <ListGroup.Item>Messages</ListGroup.Item>
        <ListGroup.Item>Download</ListGroup.Item>
      </ListGroup>
    </div>
  )
})

List group with icons

Add icons to the list group items by using the icon prop on the ListGroup.Item component.

tsx
import { component$ } from '@builder.io/qwik'
import { ListGroup } from 'flowbite-qwik'
import { IconAdjustmentsVerticalOutline, IconDownloadOutline, IconMessagesOutline, IconUserCircleOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex justify-center">
      <ListGroup class="w-48">
        <ListGroup.Item icon={IconUserCircleOutline} active>
          Profile
        </ListGroup.Item>
        <ListGroup.Item icon={IconAdjustmentsVerticalOutline}>Settings</ListGroup.Item>
        <ListGroup.Item icon={IconMessagesOutline}>Messages</ListGroup.Item>
        <ListGroup.Item icon={IconDownloadOutline}>Download</ListGroup.Item>
      </ListGroup>
    </div>
  )
})