rft/yii2-sidebar-menu

A custom sidebar menu dependent widget for Yii2

v1.0.3 2025-10-13 05:25 UTC

Requires

• yiisoft/yii2: ~2.0.0

MIT

• Renzo Tomarao

• widget
• sidebar
• yii2

README

A customizable and responsive sidebar menu widget for Yii2 applications with collapsible functionality and nested submenus.

Features

• Collapsible Design — Toggle between full and compact sidebar views
• Nested Submenus — Supports multi-level dropdown menus
• Active State Management — Automatically highlights active items
• FontAwesome Icons — Built-in icon support
• Responsive & Mobile-Friendly
• Customizable — Easily extendable styles and logic

Installation

Option 1 — via Composer (recommended)

Once published to Packagist:

composer require rft/yii2-sidebar-menu

Or if you are installing directly from GitHub:

composer require rft/yii2-sidebar-menu:dev-main

rft/sidebarmenu/
├── src/
│   ├── SidebarMenu.php
│   ├── SidebarMenuAssets.php
│   └── assets/
│       ├── css/sidebar-menu.css
│       └── js/sidebar-menu.js
├── composer.json
└── README.md

1. Add to your composer.json autoload (if manual install):

"autoload": {
    "psr-4": {
        "rft\\sidebarmenu\\": "src/"
    }
}

Then run:

composer dump-autoload

Usage Example

In your Yii2 view file:

use rft\sidebarmenu\SidebarMenu;

echo SidebarMenu::widget([
    'title' => 'Main Menu',
    'imgSrc' => 'Sidebar logo',
    'navTitle' => 'Nav-header title',
    'items' => [
        ['label' => 'Dashboard', 'icon' => 'fa fa-home', 'url' => ['/site/index']],
        [
            'label' => 'Management',
            'icon' => 'fa fa-cog',
            'items' => [
                ['label' => 'Users', 'url' => ['/user/index']],
                ['label' => 'Roles', 'url' => ['/role/index']],
            ],
        ],
        ['label' => 'Settings', 'icon' => 'fa fa-cog', 'url' => ['/site/settings']],
    ],
]);

Menu Item Structure

Each menu item can include the following keys:

| Key | Type | Description | | --------- | ------ | ---------------------------------- | ----------------------- | | label | string | Display name of the menu item | | icon | string | FontAwesome icon class (optional) | | url | array | string | The target route or URL | | visible | bool | Whether the item should be visible | | items | array | Nested submenu items (optional) |

Styling

The widget includes a default dark theme.
You can override styles via CSS variables or by extending the classes.

Example override:

.sidebar {
  --sidebar-bg: #0f172a;
  --sidebar-header-bg: #1e293b;
  --menu-hover-bg: #334155;
}

JavaScript Features

• Sidebar toggle (collapse / expand)
• Auto-closing submenus when collapsed
• Expands sidebar when submenu clicked in collapsed state

Browser Support

Browser	Supported
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅

License

This widget is open-source software licensed under the MIT License.