_activeComponentId = 'demoPanelBar'; .panel-bar ul { list-style-type: none; margin: 0px !important; } .panel-bar ul > li { white-space: nowrap } .panel-bar .icon { margin-right: 5px; }

PanelBar

A vertically stacked set of collapsible panels, each with its own header and content. Panels can expand on click or on pointer enter and either one at a time or several at once.

Try it

Component demos show every property used in the settings panel, even at default values, so you can see exactly what's being configured. Bindary's data binding updates the component live when a setting changes; that mechanism isn't covered here, see Bindary for how it works.

Add New User
Edit User Roles
Remove User
Reset Password
View User Activity
Enable/Disable User
Assign User Groups
Import Users
Export Users
Manage Permissions

General Configuration
Email Settings
Backup & Restore
Security Policies
Update Preferences

Sales Report
User Activity Report
Error Logs
Monthly Summary
System Health Check

New User Signup
System Alerts
Scheduled Tasks
Expiring Licenses
Pending Approvals

Usage

<cui-panel-bar id="panelBar" ui-observing="true" ui-expand-on-pointer-enter="false" ui-multi-expand="false"
               ui-panels='[
    { "hasIcon": true, "cssClassIcon": "ico-user", "title": "User Management" },
    { "hasIcon": true, "cssClassIcon": "ico-cog", "title": "System Settings" },
    { "hasIcon": true, "cssClassIcon": "ico-star", "title": "Reports" },
    { "hasIcon": true, "cssClassIcon": "ico-check", "title": "Notifications" }
    ]'>

    <div ui-template="Content_0" ui-cloneable="false">
        <div style="padding: 1rem">
            <ul>
                <li><i class="icon ico-plus"></i>Add New User</li>
                <li><i class="icon ico-pencil"></i>Edit User Roles</li>
                <li><i class="icon ico-cross"></i>Remove User</li>
                <li><i class="icon ico-key"></i>Reset Password</li>
                <li><i class="icon ico-eye"></i>View User Activity</li>
                <li><i class="icon ico-star"></i>Enable/Disable User</li>
                <li><i class="icon ico-check"></i>Assign User Groups</li>
                <li><i class="icon ico-upload"></i>Import Users</li>
                <li><i class="icon ico-download"></i>Export Users</li>
                <li><i class="icon ico-lock"></i>Manage Permissions</li>
            </ul>
        </div>
    </div>

    <div ui-template="Content_1" ui-cloneable="false">
        <div style="padding: 1rem">
            <ul>
                <li><i class="icon ico-check"></i>General Configuration</li>
                <li><i class="icon ico-check"></i>Email Settings</li>
                <li><i class="icon ico-check"></i>Backup & Restore</li>
                <li><i class="icon ico-check"></i>Security Policies</li>
                <li><i class="icon ico-check"></i>Update Preferences</li>
            </ul>
        </div>
    </div>

    <div ui-template="Content_2" ui-cloneable="false">
        <div style="padding: 1rem">
            <ul>
                <li><i class="icon ico-check"></i>Sales Report</li>
                <li><i class="icon ico-check"></i>User Activity Report</li>
                <li><i class="icon ico-check"></i>Error Logs</li>
                <li><i class="icon ico-check"></i>Monthly Summary</li>
                <li><i class="icon ico-check"></i>System Health Check</li>
            </ul>
        </div>
    </div>

    <div ui-template="Content_3" ui-cloneable="false">
        <div style="padding: 1rem">
            <ul>
                <li><i class="icon ico-check"></i>New User Signup</li>
                <li><i class="icon ico-check"></i>System Alerts</li>
                <li><i class="icon ico-check"></i>Scheduled Tasks</li>
                <li><i class="icon ico-check"></i>Expiring Licenses</li>
                <li><i class="icon ico-check"></i>Pending Approvals</li>
            </ul>
        </div>
    </div>
</cui-panel-bar>

const panelBar = $UI.createComponent(componyx.UI.PanelBar, {
    id: 'panelBar',
    expandOnPointerEnter: false,
    multiExpand: false,
    containerElement: document.body
});

function buildList(items) {
    const wrapper = document.createElement('div');
    wrapper.style.padding = '1rem';
    const ul = document.createElement('ul');
    for (const { icon, label } of items) {
        const li = document.createElement('li');
        li.innerHTML = `<i class="icon ${icon}"></i>${label}`;
        ul.appendChild(li);
    }
    wrapper.appendChild(ul);
    return wrapper;
}

const userPanel = $UI.createComponent(componyx.UI.Panel, {
    hasIcon: true,
    cssClassIcon: 'ico-user',
    title: 'User Management',
    content: buildList([
        { icon: 'ico-plus', label: 'Add New User' },
        { icon: 'ico-pencil', label: 'Edit User Roles' },
        { icon: 'ico-cross', label: 'Remove User' },
        { icon: 'ico-key', label: 'Reset Password' },
        { icon: 'ico-eye', label: 'View User Activity' },
        { icon: 'ico-star', label: 'Enable/Disable User' },
        { icon: 'ico-check', label: 'Assign User Groups' },
        { icon: 'ico-upload', label: 'Import Users' },
        { icon: 'ico-download', label: 'Export Users' },
        { icon: 'ico-lock', label: 'Manage Permissions' }
    ])
});

const settingsPanel = $UI.createComponent(componyx.UI.Panel, {
    hasIcon: true,
    cssClassIcon: 'ico-cog',
    title: 'System Settings',
    content: buildList([
        { icon: 'ico-check', label: 'General Configuration' },
        { icon: 'ico-check', label: 'Email Settings' },
        { icon: 'ico-check', label: 'Backup & Restore' },
        { icon: 'ico-check', label: 'Security Policies' },
        { icon: 'ico-check', label: 'Update Preferences' }
    ])
});

const reportsPanel = $UI.createComponent(componyx.UI.Panel, {
    hasIcon: true,
    cssClassIcon: 'ico-star',
    title: 'Reports',
    content: buildList([
        { icon: 'ico-check', label: 'Sales Report' },
        { icon: 'ico-check', label: 'User Activity Report' },
        { icon: 'ico-check', label: 'Error Logs' },
        { icon: 'ico-check', label: 'Monthly Summary' },
        { icon: 'ico-check', label: 'System Health Check' }
    ])
});

const notificationsPanel = $UI.createComponent(componyx.UI.Panel, {
    hasIcon: true,
    cssClassIcon: 'ico-check',
    title: 'Notifications',
    content: buildList([
        { icon: 'ico-check', label: 'New User Signup' },
        { icon: 'ico-check', label: 'System Alerts' },
        { icon: 'ico-check', label: 'Scheduled Tasks' },
        { icon: 'ico-check', label: 'Expiring Licenses' },
        { icon: 'ico-check', label: 'Pending Approvals' }
    ])
});

panelBar.panels = [userPanel, settingsPanel, reportsPanel, notificationsPanel];
panelBar.show();

Each panel entry in ui-panels can include a templateId to specify which template renders its content. If omitted, it defaults to Content_{index}, where index is the panel's position in the ui-panels array, so the first panel looks for Content_0, the second for Content_1 and so on.

A panel also has a content property that accepts an HTMLElement, DocumentFragment or string directly, letting you skip the template lookup entirely. The declarative examples above don't use it, since mixing HTML into JSON string values isn't a great fit for markup heavy content. In JavaScript, though, it's a natural fit: build the element yourself and assign it to content, as shown above.