List Group - Laravel Blade

Use the list group component to display a series of items, links, or buttons in a vertical list format with support for icons, active states, and disabled items.

Default List Group

  • Profile
  • Settings
  • Messages
  • Download

Blade code

<x-fwb.list-group>
    <x-fwb.list-group.item>Profile</x-fwb.list-group.item>
    <x-fwb.list-group.item>Settings</x-fwb.list-group.item>
    <x-fwb.list-group.item>Messages</x-fwb.list-group.item>
    <x-fwb.list-group.item>Download</x-fwb.list-group.item>
</x-fwb.list-group>

List Group with Links

Blade code

<x-fwb.list-group>
    <x-fwb.list-group.item href="#" :active="true">Profile</x-fwb.list-group.item>
    <x-fwb.list-group.item href="#">Settings</x-fwb.list-group.item>
    <x-fwb.list-group.item href="#">Messages</x-fwb.list-group.item>
    <x-fwb.list-group.item href="#" :disabled="true">Download</x-fwb.list-group.item>
</x-fwb.list-group>

List Group with Buttons

Blade code

<x-fwb.list-group>
    <x-fwb.list-group.item :button="true" :active="true">Profile</x-fwb.list-group.item>
    <x-fwb.list-group.item :button="true">Settings</x-fwb.list-group.item>
    <x-fwb.list-group.item :button="true">Messages</x-fwb.list-group.item>
    <x-fwb.list-group.item :button="true" :disabled="true">Download</x-fwb.list-group.item>
</x-fwb.list-group>

List Group with Icons

Blade code

<x-fwb.list-group>
    <x-fwb.list-group.item href="#" fwb-icon="s-user-circle">Profile</x-fwb.list-group.item>
    <x-fwb.list-group.item href="#" fwb-icon="o-cog">Settings</x-fwb.list-group.item>
    <x-fwb.list-group.item href="#" fwb-icon="o-envelope">Messages</x-fwb.list-group.item>
    <x-fwb.list-group.item href="#" fwb-icon="o-download">Download</x-fwb.list-group.item>
</x-fwb.list-group>

Component Properties

List Group x-fwb.list-group

Prop Type Default Description
bordered bool true Show border and rounded corners around the list group.

List Group Item x-fwb.list-group.item

Prop Type Default Description
href string|null null URL for the item. Renders as an anchor tag when provided.
fwb-icon string|null null Shorthand icon name from flowbite-blade-icons (e.g. s-user-circle). Renders with default w-4 h-4 me-2.5 classes.
icon string|null null Raw HTML/SVG icon string. Takes priority over fwb-icon prop.
active bool false Highlight the item with an active (blue) background.
disabled bool false Disable the item with reduced opacity and no-cursor styling.
button bool false Render the item as a button element with interactive styles.