<ul id="main-menu" class="">
<!-- add class "multiple-expanded" to allow multiple submenus to open -->
<!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
<!-- Search Bar -->
<li id="search">
    <form method="get" action="">
        <input type="text" name="q" class="search-input" placeholder="Search something..."/>
        <button type="submit">
            <i class="entypo-search"></i>
        </button>
    </form>
</li>
<li n:class="$presenter->isLinkCurrent('Overview:*') ? active">
    <a n:href="Overview:default">
        <i class="entypo-gauge"></i>
        <span>{_admin.overview}</span>
    </a>
</li>
<li>
    <a href="mailbox.html">
        <i class="entypo-mail"></i>
        <span>Mailbox</span>
        <span class="badge badge-secondary">8</span>
    </a>
    <ul>
        <li>
            <a href="mailbox.html">
                <i class="entypo-inbox"></i>
                <span>Inbox</span>
            </a>
        </li>
        <li>
            <a href="mailbox-compose.html">
                <i class="entypo-pencil"></i>
                <span>Compose Message</span>
            </a>
        </li>
        <li>
            <a href="mailbox-message.html">
                <i class="entypo-attach"></i>
                <span>View Message</span>
            </a>
        </li>
    </ul>
</li>
<li>
    <a n:href="Settings:default">
        <i class="entypo-flow-tree"></i>
        <span>{_admin.settings}</span>
    </a>
    <ul>
        <li>
            <a href="#">
                <i class="entypo-flow-line"></i>
                <span>Menu Level 1.1</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="entypo-flow-line"></i>
                <span>Menu Level 1.2</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="entypo-flow-line"></i>
                <span>Menu Level 1.3</span>
            </a>
            <ul>
                <li>
                    <a href="#">
                        <i class="entypo-flow-parallel"></i>
                        <span>Menu Level 2.1</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="entypo-flow-parallel"></i>
                        <span>Menu Level 2.2</span>
                    </a>
                    <ul>
                        <li>
                            <a href="#">
                                <i class="entypo-flow-cascade"></i>
                                <span>Menu Level 3.1</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="#">
                                        <i class="entypo-flow-branch"></i>
                                        <span>Menu Level 4.1</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <i class="entypo-flow-cascade"></i>
                                <span>Menu Level 3.2</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="entypo-flow-parallel"></i>
                        <span>Menu Level 2.3</span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>