metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Side navigation - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Side navigation</a></li> <li class="toc-entry"><a href="#_sidenav_about">About</a></li> <li class="toc-entry"><a href="#_sidenav-simple">Side menu simple</a></li> <li class="toc-entry"><a href="#_sidenav-counter">Side menu with counter</a></li> <li class="toc-entry"><a href="#_sidenav-m3">Side menu M3</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Side navigation</h1> <p class="text-leader"> Metro 4 contains components to create user-friendly side navigation. </p>  <h3 id="_sidenav_about">About</h3> <p> Often the project needs to implement a side menu. Metro 4 gives you the opportunity to do this in many ways. You can use: <strong>side menu</strong>, <strong>side menu with counter</strong> or <strong>side menu m3</strong>. </p> <h3 id="_sidenav-simple">Side menu simple</h3> <p> To create <code>side navigation</code> you must add class <code>.sidenav-simple</code> to list and create <code>items</code> in special formats. Each item must contains: <code>icon</code> and <code>title</code> elements. </p> <p> By default, side menu displayed in compact mode. To expand it, you must add one of classes: <code>.sidenav-simple-expand-fs</code>, <code>.sidenav-simple-expand-sm</code>, <code>.sidenav-simple-expand-md</code>, <code>.sidenav-simple-expand-lg</code>, <code>.sidenav-simple-expand-xl</code> or <code>.sidenav-simple-expand-xxl</code>. More about media breakpoints you can see in <a href="media.html">this article</a>. </p> <div class="example"> <div class="row"> <div class="cell-md-6 flex-no-shrink"> <h5>Expanded</h5> <ul class="sidenav-simple sidenav-simple-expand-fs h-auto"> <li><a href="#"> <span class="mif-apps icon"></span> <span class="title">all items</span> </a></li> <li><a href="#"> <span class="mif-vpn-lock icon"></span> <span class="title">websites</span> </a></li> <li class="active"><a href="#"> <span class="mif-drive-eta icon"></span> <span class="title">Virtual machines</span> </a></li> <li><a href="#"> <span class="mif-cloud icon"></span> <span class="title">Cloud services</span> </a></li> <li><a href="#"> <span class="mif-database icon"></span> <span class="title">SQL Databases</span> </a></li> <li><a href="#"> <span class="mif-cogs icon"></span> <span class="title">Automation</span> </a></li> </ul> </div> <div class="cell-md-6"> <h5>Compact</h5> <ul class="sidenav-simple h-auto"> <li><a href="#"> <span class="mif-apps icon"></span> <span class="title">all items</span> </a></li> <li><a href="#"> <span class="mif-vpn-lock icon"></span> <span class="title">websites</span> </a></li> <li class="active"><a href="#"> <span class="mif-drive-eta icon"></span> <span class="title">Virtual machines</span> </a></li> <li><a href="#"> <span class="mif-cloud icon"></span> <span class="title">Cloud services</span> </a></li> <li><a href="#"> <span class="mif-database icon"></span> <span class="title">SQL Databases</span> </a></li> <li><a href="#"> <span class="mif-cogs icon"></span> <span class="title">Automation</span> </a></li> </ul> </div> </div> </div> <pre><code class="html"> <ul class="sidenav-simple h-auto"> <li><a href="#"> <span class="mif-apps icon"></span> <span class="title">all items</span> </a></li> ... </ul> </code></pre>  <h3 id="_sidenav-counter">Side menu with counter</h3> <p> To create <code>side navigation with counter</code> you must add class <code>.sidenav-counter</code> to list and create <code>items</code> in special formats. Each item must contains: <code>icon</code>, <code>title</code> and <code>counter</code> elements. </p> <p> By default, side menu displayed in compact mode. To expand it, you must add one of classes: <code>.sidenav-counter-expand-fs</code>, <code>.sidenav-counter-expand-sm</code>, <code>.sidenav-counter-expand-md</code>, <code>.sidenav-counter-expand-lg</code>, <code>.sidenav-counter-expand-xl</code> or <code>.sidenav-counter-expand-xxl</code>. More about media breakpoints you can see in <a href="media.html">this article</a>. </p> <div class="example"> <div class="row"> <div class="cell-md-6 flex-no-shrink"> <h5>Expanded</h5> <ul class="sidenav-counter sidenav-counter-expand-fs h-auto"> <li><a href="#"> <span class="mif-apps icon"></span> <span class="title">all items</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-vpn-lock icon"></span> <span class="title">websites</span> <span class="counter">0</span> </a></li> <li class="active"><a href="#"> <span class="mif-drive-eta icon"></span> <span class="title">Virtual machines</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-cloud icon"></span> <span class="title">Cloud services</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-database icon"></span> <span class="title">SQL Databases</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-cogs icon"></span> <span class="title">Automation</span> <span class="counter">0</span> </a></li> </ul> </div> <div class="cell-md-6"> <h5>Compact</h5> <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> <li><a href="#"> <span class="mif-vpn-lock icon"></span> <span class="title">websites</span> <span class="counter">0</span> </a></li> <li class="active"><a href="#"> <span class="mif-drive-eta icon"></span> <span class="title">Virtual machines</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-cloud icon"></span> <span class="title">Cloud services</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-database icon"></span> <span class="title">SQL Databases</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-cogs icon"></span> <span class="title">Automation</span> <span class="counter">0</span> </a></li> </ul> </div> </div> </div> <pre><code class="html"> <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> </code></pre> <p> To set this menu for right to left language, add attribute <code>dir="rtl"</code> to list. </p> <div class="example"> <div class="row"> <div class="cell-md-6 flex-no-shrink"> <h5>Expanded</h5> <ul class="sidenav-counter sidenav-counter-expand-fs h-auto" dir="rtl"> <li><a href="#"> <span class="mif-apps icon"></span> <span class="title">all items</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-vpn-lock icon"></span> <span class="title">websites</span> <span class="counter">0</span> </a></li> <li class="active"><a href="#"> <span class="mif-drive-eta icon"></span> <span class="title">Virtual machines</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-cloud icon"></span> <span class="title">Cloud services</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-database icon"></span> <span class="title">SQL Databases</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-cogs icon"></span> <span class="title">Automation</span> <span class="counter">0</span> </a></li> </ul> </div> <div class="cell-md-6"> <h5>Compact</h5> <ul class="sidenav-counter h-auto" dir="rtl"> <li><a href="#"> <span class="mif-apps icon"></span> <span class="title">all items</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-vpn-lock icon"></span> <span class="title">websites</span> <span class="counter">0</span> </a></li> <li class="active"><a href="#"> <span class="mif-drive-eta icon"></span> <span class="title">Virtual machines</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-cloud icon"></span> <span class="title">Cloud services</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-database icon"></span> <span class="title">SQL Databases</span> <span class="counter">0</span> </a></li> <li><a href="#"> <span class="mif-cogs icon"></span> <span class="title">Automation</span> <span class="counter">0</span> </a></li> </ul> </div> </div> </div> <pre><code class="html"> <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> </code></pre>  <h3 id="_sidenav-m3">Side menu m3</h3> <p> This navigation menu crawled from the version of Metro 3, hence the name <code>.sidenav-m3</code> </p> <div class="example"> <div class="row"> <div class="cell-md-6 clear"> <ul class="sidenav-m3 float-left"> <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> </div> <div class="cell-md-6 clear"> <ul class="sidenav-m3 float-right" dir="rtl"> <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> </div> </div> </div> <pre><code class="html"> <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> </code></pre> <p> To set this menu for right to left language, add attribute <code>dir="rtl"</code> to list. </p> <pre><code class="html"> <ul class="sidenav-m3" dir="rtl"> ... </ul> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>