Navigation Style

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu
Left-menu Bg-Image

Leftmenu Styles Mode

Light Menu
Dark Menu
Color Menu
Gradient-Color Menu
Loader

Simple avatar

<div class="avatar-list">
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/1.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/2.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/1.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/2.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/3.jpg"></span>
                        </div>

Avatars list

+8
<div class="avatar-list avatar-list-stacked">
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/10.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/8.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/9.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/10.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/11.jpg"></span>
                            <span class="avatar">+8</span>
                        </div>

Avatar status

<div class="avatar-list">
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/8.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/5.jpg">
                                <span class="avatar-status"></span>
                            </span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/9.jpg">
                                <span class="avatar-status bg-red"></span>
                            </span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/6.jpg">
                                <span class="avatar-status bg-green"></span>
                            </span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/7.jpg">
                                <span class="avatar-status bg-yellow"></span>
                            </span>
                        </div>

Avatar size

<div class="avatar-list">
                            <span class="avatar avatar-sm cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/4.jpg"></span>
                            <span class="avatar cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/3.jpg"></span>
                            <span class="avatar avatar-md cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/5.jpg"></span>
                            <span class="avatar avatar-lg cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/6.jpg"></span>
                            <span class="avatar avatar-xl cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/4.jpg"></span>
                            <span class="avatar avatar-xxl cover-image"  data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark-rtl/assets/images/users/7.jpg"></span>
                        </div>