List Group

The List Group component provides a flexible and customizable way to display a series of content, such as links, buttons, or custom elements, in a vertical or horizontal list. It supports active, disabled, and flush states, and can be used for navigation, selection, or display of grouped items.

Description #

The List Group component is a versatile UI element for grouping related content. It supports different layouts (vertical, horizontal), active and disabled states, and can be used with custom content such as checkboxes, radios, or links. The .list-group-flush modifier removes borders and background for a minimal look.

• Vertical (flex-column): Default layout, items are stacked vertically.

• Horizontal (flex-row): Items are arranged in a row, useful for toolbars or navigation.

• Flush: Removes outer borders and background for a seamless look.

• Active/Disabled: Items can be marked as active or disabled for selection or state indication.

Examples and Classes #

Basic Example

            

                

                    

                        active item
                    
                    

                        item
                    
                    

                        item
                    
                    

                        item
                    
                
            
            

                
                
HTML
                
            
            <ul class="list-group w-50 flex-row">
    <li class="list-group-item active">
        <a>active item</a>
    </li>
    <li class="list-group-item">
        <a>item</a>
    </li>
    <li class="list-group-item">
        <a>item</a>
    </li>
    <li class="list-group-item">
        <a>item</a>
    </li>
</ul>
        

Disabled State

Add the disabled attribute to <li> to make a list group item non-interactive.

            

                

                    

                        active item
                    
                    

                        disabled
                    
                    

                        disabled
                    
                    

                        item
                    
                
            
            

                
                
HTML
                
            
            <ul class="list-group w-50 flex-row">
    <li class="list-group-item active">
        <a>active item</a>
    </li>
    <li class="list-group-item" disabled>
        <a>disabled</a>
    </li>
    <li class="list-group-item" disabled>
        <a>disabled</a>
    </li>
    <li class="list-group-item">
        <a>item</a>
    </li>
</ul>
        

Available Classes

Class	Description
.list-group	Main wrapper for the list group items. Controls the layout and spacing of multiple items. Use with .flex-column or .flex-row for direction.
.list-group-items	Individual list group item. Can be used with active or disabled states.
.list-group-flush	Removes borders and background for a minimal, seamless look.
.active	Highlights the item as active (selected).

Layout Variations

The list group component supports different layout variations:

• Vertical (flex-column): Items stacked vertically
• Horizontal (flex-row): Items arranged in a row
• Flush: Minimal, borderless style
• Active/Disabled: Highlight or disable items (For disabled, use disabled attribute on li)

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/list-group/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/list-group/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/list-group/script.js	JavaScript functionality (currently not required)

SCSS Variables #

            

                
                
SCSS
                
            
            $list-group-custom-classes: ".d-flex, .justify-content-center, .align-items-center";
$list-group-transition:0.2s linear;
$list-group-item-custom-classes: ".bw-1, .border-color, .border-style-solid, .w-100, .p-1, .text-color, .cursor-pointer";
$list-group-item-active-custom-classes: ".bg-primary-color, .on-primary-color";
$list-group-item-disabled-custom-classes: ".bg-primary-color, .on-primary-color";
$list-group-list-item-marker-custom-classes: ".text-color";
$list-group-flush-list-item-active-custom-classes: ".on-primary-color";
$list-group-flush-list-item-marker-custom-classes: ".text-color";

JavaScript Implementation #

Class Structure

            

                
JavaScript
            
            class ListGroup {
    constructor() {
        this.init();
    }

    init() {
        document.querySelectorAll('.list-group').forEach(list => {
            this.setupList(list);
        });
    }

    setupList(list) {
        const items = list.querySelectorAll('.list-group-item');

        items.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();

                if (item.hasAttribute('disabled')) return;

                items.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
            });
        });
    }
}

new ListGroup();