Navigation Style

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu

Horizontalmenu Styles Mode

Color Menu
Light Menu
Dark Menu
Gradient-Color Menu
Loader

Simple avatar

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

Avatar size

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

Avatar status

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

Avatars list

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