Dashboard

Basic

Container

class='adb-neumor-container'

Rounded Container

class='adb-neumor-container adb-neumor-container--rounded'

Container with border

class='adb-neumor-container adb-bordered'

Rounded Container with border

class='adb-neumor-container adb-neumor-container--rounded adb-bordered'

Typography

Nunito-Black

Using Nunito-Black (test.css)

                                        
    .your-element{
        font-family: Nunito-Black;
    }

Nunito-Bold

Using Nunito-Bold (test.css)

                                        
    .your-element{
        font-family: Nunito-Bold;
    }

Nunito-ExtraBold

Nunito-Regular

Nunito-Light

Custom Sidebar

Add these blue lines below to sidebar-options-container, don't create a new 'sidebar-options-container' element

Add these blue lines to 'sidebar-options-container'

                                        
    <div class="sidebar animate__animated animate__slideInLeft">
        <div class="w-100 sidebar-options-container">
            
            <div class="sidebar-btn-container">
                <button class="sidebar-btn" data-panel-id="#your-panel-id">
                <i class="fas fa-circle-notch"></i>
                </button>
            </div>
            
        </div>
    </div>

Custom Menubar

Add these blue lines below to menubar, don't create a new 'menubar' element.

Your panel id must be the same as 'data-panel-id' you assigned at 'sidebar-btn' above.

I used custom properties CSS to make a smooth animation of menubar's items. Make sure you check '--index' in 'menubar-animated-item' to get them in order.

Add these blue lines to 'menubar'

                                        
    <!--Panel-->
    <div id="your-panel-id" class="panel">
        <!--Panel title-->
        <div class="title menubar-animated-item show" style="--index: 0;">
            Dashboard
        </div&g
        <!--Panel options container-->
        <div class="sub-option-container mt-5">
            <div class="sub-option-title menubar-animated-item show" style="--index: 1;">
                View
            </div>
            <ul class="sub-option-list list-unstyled">
                <li class="menubar-animated-item show" style="--index: 2;">
                    <a href="" class="sub-option">
                        <i class="far fa-eye"></i>
                        <span>Basic</span>
                    </a>
                </li>
                <li class="menubar-animated-item show" style="--index: 3;">
                    <a href="" class="sub-option">
                        <i class="fab fa-wpforms"></i>
                        <span>Form</span>
                    </a>
                </li>
                <li class="menubar-animated-item show" style="--index: 4;">
                    <a href="" class="sub-option">
                        <i class="fas fa-archive"></i>
                        <span>Components</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

Thank you for choosing Neumorphism Admin Dashboard