Koyaka

Menu

Basic Menu


    <ul class="menu primary" style="width: 200px">
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <hr />
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a class="active">Item 3</a></li>
    </ul>
    

Menu Icons


    <ul class="menu" style="width: 200px">
        <li>
            <a>
                <div class="icon">
                    <i class="fa-solid fa-circle-chevron-down"></i>
                </div>
                Item 1
            </a>
        </li>
        <li>
            <a>
                <div class="icon">
                    <i class="fa-solid fa-circle-chevron-down"></i>
                </div>
                Item 2
            </a>
        </li>
        <li>
            <a class="active">
                <div class="icon">
                    <i class="fa-solid fa-circle-chevron-down"></i>
                </div>
                Item 3
            </a>
        </li>
    </ul>
    

Menu Label


    <ul class="menu" style="width: 200px">
        <li class="label">Account Information</li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
        <li class="label">Settings</li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
    </ul>
    

Menu Tree


    <ul class="menu" style="width: 200px">
        <li class="label">Account Information</li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li>
            <a>Item 3</a>
            <ul>
                <li><a>tree 1</a></li>
                <li>
                    <a>tree 2</a>
                    <ul>
                        <li><a>tree 1</a></li>
                        <li><a>tree 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    

Menu Hoverable


    <div class="flex-center">
        <ul class="menu" style="width: 200px">
            <li class="label">Account Information</li>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li class="expander">
                <a>Hoverable menu right</a>
                <ul class="menu">
                    <li><a>1</a></li>
                    <li><a>2</a></li>
                </ul>
            </li>
            <li class="expander left">
                <a>Hoverable menu left</a>
                <ul class="menu">
                    <li><a>1</a></li>
                    <li><a>2</a></li>
                </ul>
            </li>
        </ul>
    </div>
    

Menu Collapse


    <ul class="menu" style="width: 200px">
        <li class="label">Account Information</li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li>
            <details open>
                <summary>
                    <i class="fa-solid fa-folder"></i>
                    <span>Folder1</span>
                </summary>
                <ul>
                    <li>
                        <a>
                            <i class="fa-solid fa-file"></i>
                            <span>1.txt</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="fa-solid fa-file"></i>
                            <span>2.txt</span>
                        </a>
                    </li>
                </ul>
            </details>
        </li>
    </ul>
    

Menu Minimal


    <ul class="menu minimal" style="width: 200px">
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <hr />
        <li>
            <a>
                <i class="fa-solid fa-file"></i>
                Item 2
            </a>
        </li>
        <li>
            <a>
                <i class="fa-solid fa-file"></i>
                Item 2
            </a>
        </li>
        <li>
            <a class="active"> <i class="fa-solid fa-file"></i>Item 3 </a>
        </li>
    </ul>
    

Menu Context


    <ul class="menu context" style="width: 200px">
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <hr />
        <li>
            <a>
                <i class="fa-solid fa-file"></i>
                Item 2
            </a>
        </li>
        <li>
            <a>
                <i class="fa-solid fa-file"></i>
                Item 2
            </a>
        </li>
        <li>
            <a class="active"> <i class="fa-solid fa-file"></i>Item 3 </a>
        </li>
    </ul>