Side navigation

Metro UI contains components to create user-friendly side navigation.

About

Often the project needs to implement a side menu. Metro UI gives you the opportunity to do this in many ways. You can use: side menu, side menu with counter or side menu m3.

Side menu simple

To create side navigation you must add class .sidenav-simple to list and create items in special formats. Each item must contains: icon and title elements.

By default, side menu displayed in compact mode. To expand it, you must add one of classes: .sidenav-simple-expand-fs, .sidenav-simple-expand-sm, .sidenav-simple-expand-md, .sidenav-simple-expand-lg, .sidenav-simple-expand-xl or .sidenav-simple-expand-xxl. More about media breakpoints you can see in this article.

                    <ul class="sidenav-simple h-auto">
                        <li><a href="#">
                            <span class="mif-apps icon"></span>
                            <span class="title">all items</span>
                        </a></li>
                        ...
                    </ul>
                

Side menu with counter

To create side navigation with counter you must add class .sidenav-counter to list and create items in special formats. Each item must contains: icon, title and counter elements.

By default, side menu displayed in compact mode. To expand it, you must add one of classes: .sidenav-counter-expand-fs, .sidenav-counter-expand-sm, .sidenav-counter-expand-md, .sidenav-counter-expand-lg, .sidenav-counter-expand-xl or .sidenav-counter-expand-xxl. More about media breakpoints you can see in this article.

                    <ul class="sidenav-counter">
                        <li><a href="#">
                            <span class="mif-apps icon"></span>
                            <span class="title">all items</span>
                            <span class="counter">0</span>
                        </a></li>
                        ...
                    </ul>
                

To set this menu for right to left language, add attribute dir="rtl" to list.

                    <ul class="sidenav-counter" dir="rtl">
                        <li><a href="#">
                            <span class="mif-apps icon"></span>
                            <span class="title">all items</span>
                            <span class="counter">0</span>
                        </a></li>
                        ...
                    </ul>
                

Side menu m3

This navigation menu crawled from the version of Metro 3, hence the name .sidenav-m3

                    <ul class="sidenav-m3">
                        <li class="title">Title 1</li>
                        <li class="active"><a href="#"><span class="mif-home icon"></span>Dashboard</a></li>
                        <li class="stick-right bg-red"><a href="#"><span class="mif-cog icon"></span>Layouts</a></li>
                        <li class="stick-left bg-green">
                            <a class="dropdown-toggle" href="#"><span class="mif-tree icon"></span>Sub menu</a>
                            <ul class="d-menu" data-role="dropdown" style="display: none;">
                                <li><a href=""><span class="mif-vpn-lock icon"></span> Subitem 1</a></li>
                                <li><a href="">Subitem 2</a></li>
                                <li><a href="">Subitem 3</a></li>
                                <li><a href="">Subitem 4</a></li>
                                <li class="disabled"><a href="">Subitem 5</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Thread item</a></li>
                        <li class="disabled"><a href="#">Disabled item</a></li>

                        <li class="title">Title 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>
                    </ul>
                

To set this menu for right to left language, add attribute dir="rtl" to list.

                    <ul class="sidenav-m3" dir="rtl">
                    ...
                    </ul>