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 Round avatar

<div class="avatar-list">
                            <span class="avatar  brround cover-image" data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/12.jpg"></span>
                            <span class="avatar  brround cover-image" data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/13.jpg"></span>
                            <span class="avatar  brround cover-image" data-image-src= "https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/11.jpg"></span>
                            <span class="avatar  brround cover-image" data-image-src= "https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/12.jpg"></span>
                            <span class="avatar  brround cover-image" data-image-src= "https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/14.jpg"></span>
                        </div>

RoundAvatars list

+8
<div class="avatar-list avatar-list-stacked">
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/12.jpg"></span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/1.jpg"></span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/19.jpg"></span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/2.jpg"></span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/14.jpg"></span>
                            <span class="avatar brround cover-image">+8</span>
                        </div>

RoundAvatar size

<div class="avatar-list">
                            <span class="avatar avatar-sm brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/15.jpg"></span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/13.jpg"></span>
                            <span class="avatar avatar-md brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/16.jpg"></span>
                            <span class="avatar avatar-lg brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/17.jpg"></span>
                            <span class="avatar avatar-xl brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/14.jpg"></span>
                            <span class="avatar avatar-xxl brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/18.jpg"></span>
                        </div>

RoundAvatar status

<div class="avatar-list">
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/19.jpg"></span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/15.jpg">
                                <span class="avatar-status bg-secondary"></span>
                            </span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/20.jpg">
                                <span class="avatar-status bg-red"></span>
                            </span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/11.jpg">
                                <span class="avatar-status bg-green"></span>
                            </span>
                            <span class="avatar brround cover-image"  data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/17.jpg">
                                <span class="avatar-status bg-yellow"></span>
                            </span>
                        </div>