jQuery Vertical Menu Plugin – metisMenu.js

Live Demo

<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/bootstrap4/bootstrapcustom.min.css" />
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/css/metisMenu.min.css" />
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/css/mm-vertical.css" />
<div class="container">

    <div class="row">
        <div class="col-12">
            <h4>1. Auto Collapse</h4>
        </div>
    </div>

    <div class="row">
        <aside class="col-md-6">
            <nav class="sidebar-nav">
                <ul class="metismenu" id="menu1">
                    <li>
                        <a class="has-arrow" href="#">
                            <span class="fa fa-fw fa-github fa-lg"></span>
                            metisMenu
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span class="fa fa-fw fa-code-fork"></span> Fork
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-fw fa-star"></span> Star
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-fw fa-exclamation-triangle"></span> Issues
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
                        <ul>
                            <li><a href="#">item 0.1</a></li>
                            <li><a href="#">item 0.2</a></li>
                            <li><a href="#">onokumus</a></li>
                            <li><a href="#">item 0.4</a></li>
                        </ul>
                    </li>
                    <li id="removable">
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
                        <ul>
                            <li><a href="#">item 1.1</a></li>
                            <li><a href="#">item 1.2</a></li>
                            <li class="mm-active">
                                <a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
                                <ul>
                                    <li><a href="#">item 1.3.1</a></li>
                                    <li><a href="#">item 1.3.2</a></li>
                                    <li><a href="#">item 1.3.3</a></li>
                                    <li><a href="#">item 1.3.4</a></li>
                                </ul>
                            </li>
                            <li><a href="#">item 1.4</a></li>
                            <li>
                                <a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
                                <ul>
                                    <li><a href="#">item 1.5.1</a></li>
                                    <li><a href="#">item 1.5.2</a></li>
                                    <li><a href="#">item 1.5.3</a></li>
                                    <li><a href="#">item 1.5.4</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
                        <ul>
                            <li><a href="#">item 2.1</a></li>
                            <li><a href="#">item 2.2</a></li>
                            <li><a href="#">item 2.3</a></li>
                            <li><a href="#">item 2.4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>
    </div>

    <div class="row">
        <div class="col-12">
            &nbsp;
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <h4>2. No Collapse</h4>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <nav class="sidebar-nav">
                <ul class="metismenu" id="menu2">
                    <li>
                        <a class="has-arrow" href="#">
                            <span class="fa fa-fw fa-github fa-lg"></span>
                            metisMenu
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span class="fa fa-fw fa-code-fork"></span> Fork
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-fw fa-star"></span> Star
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-fw fa-exclamation-triangle"></span> Issues
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
                        <ul>
                            <li><a href="#">item 0.1</a></li>
                            <li><a href="#">item 0.2</a></li>
                            <li><a href="#">onokumus</a></li>
                            <li><a href="#">item 0.4</a></li>
                        </ul>
                    </li>
                    <li id="removable">
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
                        <ul>
                            <li><a href="#">item 1.1</a></li>
                            <li><a href="#">item 1.2</a></li>
                            <li class="mm-active">
                                <a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
                                <ul>
                                    <li><a href="#">item 1.3.1</a></li>
                                    <li><a href="#">item 1.3.2</a></li>
                                    <li><a href="#">item 1.3.3</a></li>
                                    <li><a href="#">item 1.3.4</a></li>
                                </ul>
                            </li>
                            <li><a href="#">item 1.4</a></li>
                            <li>
                                <a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
                                <ul>
                                    <li><a href="#">item 1.5.1</a></li>
                                    <li><a href="#">item 1.5.2</a></li>
                                    <li><a href="#">item 1.5.3</a></li>
                                    <li><a href="#">item 1.5.4</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
                        <ul>
                            <li><a href="#">item 2.1</a></li>
                            <li><a href="#">item 2.2</a></li>
                            <li><a href="#">item 2.3</a></li>
                            <li><a href="#">item 2.4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

    </div>

</div>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/js/metisMenu.min.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/js/mm-vertical.js"></script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.