Sidebarcomponent

Metro UI CSS provides SideBar component. This component is great to create side menu. For dropdown you must include metro-dropdown.js. See code below for definition details.

<nav class="sidebar (light)">
    <ul>
        <li class="title">Items Group 1</li>
        <li class="active"><a href="#"><i class="icon-home"></i>Dashboard</a></li>
        <li class="stick bg-red"><a href="#"><i class="icon-cog"></i>Layouts</a></li>
        <li class="stick bg-yellow">
            <a class="dropdown-toggle" href="#"><i class="icon-tree-view"></i>Sub menu</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="">Subitem 1</a></li>
                <li><a href="">Subitem 2</a></li>
                <li><a href="">Subitem 3</a></li>
                <li class="divider"></li>
                <li><a href="">Subitem 4</a></li>
                <li class="disabled"><a href="">Subitem 4</a></li>
            </ul>
        </li>
        <li class="stick bg-green"><a href="#">Thread item</a></li>
        <li class="disabled"><a href="#">Disabled item</a></li>

        <li class="title">Items Group 2</li>
        <li><a href="#">Other Item 1</a></li>
        <li><a href="#">Other item 2</a></li>
        <li><a href="#">Other item 3</a></li>
        <li>
            <a class="dropdown-toggle" href="#">Sub menu 2</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="">Subitem 1</a></li>
                <li><a href="">Subitem 2</a></li>
                <li><a href="">Subitem 3</a></li>
            </ul>
        </li>
    </ul>
</nav>