metro4/docs/sidenav.html

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

<form class="d-flex flex-align-center flex-justify-between flex-nowrap p-1 pr-2">
    <input type="text" placeholder="Search..." data-role="search" data-clear-button="false" class="mb-0" id="search_input">
    <button type="button" class="expand-button ml-2 d-block d-none-md" id="doc-nav-toggle"><span></span></button>
</form>

<hr/>

<nav id="doc-nav" class="pt-1" data-role="collapse" data-toggle-element="#doc-nav-toggle">
    <div class="doc-nav-item">
        <a href="intro.html">Getting started</a>
        <ul class="toc-nav">
            <li class="done"><a href="intro.html">Introduction</a></li>
            <li class="done"><a href="download.html">Download</a></li>
            <li class="done"><a href="contents.html">Contents</a></li>
            <li class="done"><a href="browsers.html">Browsers &amp; devices</a></li>
            <li class="done"><a href="media.html">Media breakpoints</a></li>
            <li class="done"><a href="events.html">Define Events</a></li>
            <li class="done"><a href="i18n.html">i18n</a></li>
            <li class="done"><a href="configuring.html">Configuring</a></li>
            <li class="done"><a href="vuejs.html">VueJS</a></li>
        </ul>
    </div>
    <div class="doc-nav-item">
        <a href="containers.html">Components</a>
        <ul class="toc-nav">
            <li class="toc-nav-title">Base</li>
                <li class="done"><a href="containers.html">Containers</a></li>
                <li class="done"><a href="grid.html">Grid system</a></li>
                <li class="done"><a href="typography.html">Typography</a></li>
                <li class="done"><a href="tables.html">Tables</a></li>
                <li class="done"><a href="forms.html">Forms</a></li>
                <li class="done"><a href="buttons.html">Buttons</a></li>
                <li class="done"><a href="images.html">Images</a></li>
                <li class="done"><a href="figures.html">Figures</a></li>
                <li class="done"><a href="lists.html">Lists</a></li>

            <li class="toc-nav-title">Form components</li>
                <li class="done"><a href="checkbox.html">Checkbox</a></li>
                <li class="done"><a href="file.html">File input</a></li>
                <li class="done"><a href="input.html">Input</a></li>
                <li class="done"><a href="input-material.html">Input material</a></li>
                <li class="done"><a href="keypad.html">Keypad</a></li>
                <li class="done"><a href="rating.html">Rating</a></li>
                <li class="done"><a href="radio.html">Radio</a></li>
                <li class="done"><a href="select.html">Select</a></li>
                <li class="done"><a href="slider.html">Slider</a></li>
                <li class="done"><a href="spinner.html">Spinner</a></li>
                <li class="done"><a href="switch.html">Switch</a></li>
                <li class="done"><a href="tag-input.html">Tag input</a></li>
                <li class="done"><a href="textarea.html">Textarea</a></li>

            <li class="toc-nav-title">Menus</li>
                <li class="done"><a href="app-bar.html">App bar</a></li>
                <li class="done"><a href="bottom-nav.html">Bottom navigation</a></li>
                <li class="done"><a href="bottom-sheet.html">Bottom sheet</a></li>
                <li class="done"><a href="menu.html">Menu</a></li>
                <li class="done"><a href="ribbon-menu.html">Ribbon Menu</a></li>
                <!--<li class="done"><a href="head-bar.html">Head bar</a></li>-->
                <li class="done"><a href="sidebar.html">Side bar</a></li>
                <li class="done"><a href="sidenavigation.html">Side navigation</a></li>

            <li class="toc-nav-title">Controls</li>
                <li class="done"><a href="accordion.html">Accordion</a></li>
                <li class="done"><a href="badge.html">Badge</a></li>
                <li class="done"><a href="carousel.html">Carousel</a></li>
                <li class="done"><a href="cards.html">Cards</a></li>
                <li class="done"><a href="cube.html">Cube</a></li>
                <li class="done"><a href="counter.html">Counter</a></li>
                <li class="done"><a href="charms.html">Charms</a></li>
                <li class="done"><a href="donut.html">Donut</a></li>
                <li class="done"><a href="image-compare.html">Image compare</a></li>
                <li class="done"><a href="image-magnifier.html">Image magnifier</a></li>
                <li class="done"><a href="gravatar.html">Gravatar</a></li>
                <li class="done"><a href="list.html">List</a></li>
                <li class="done"><a href="listview.html">ListView</a></li>
                <li class="done"><a href="master.html">Master</a></li>
                <li class="done"><a href="navview.html">NavView</a></li>
                <li class="done"><a href="popovers.html">Popovers</a></li>
                <li class="done"><a href="panels.html">Panels</a></li>
                <li class="done"><a href="progress.html">Progress &amp; Activity</a></li>
                <li class="done"><a href="streamer.html">Streamer</a></li>
                <li class="done"><a href="stepper.html">Stepper</a></li>
                <li class="done"><a href="splitter.html">Splitter</a></li>
                <li class="done"><a href="tabs.html">Tabs</a></li>
                <li class="done"><a href="tabs-material.html">Tabs material</a></li>
                <li class="done"><a href="table.html">Table</a></li>
                <li class="done"><a href="tiles.html">Tiles</a></li>
                <li class="done"><a href="treeview.html">TreeView</a></li>
                <li class="done"><a href="wizard.html">Wizard</a></li>

            <li class="toc-nav-title">Information</li>
                <li class="done"><a href="dialog.html">Dialogs</a></li>
                <li class="done"><a href="info-box.html">Info box</a></li>
                <li class="done"><a href="hints.html">Hints</a></li>
                <li class="done"><a href="notify.html">Notify system</a></li>
                <li class="done"><a href="toast.html">Toasts</a></li>
                <li class="done"><a href="windows.html">Windows</a></li>

            <li class="toc-nav-title">Date &amp; time</li>
                <li class="done"><a href="calendar.html">Calendar</a></li>
                <li class="done"><a href="calendarpicker.html">Calendar picker</a></li>
                <li class="done"><a href="datepicker.html">Date picker</a></li>
                <li class="done"><a href="timepicker.html">Time picker</a></li>
                <li class="done"><a href="countdown.html">Countdown</a></li>
                <li class="done"><a href="dateformat.html">Formatting date</a></li>

            <li class="toc-nav-title">Media</li>
                <li class="done"><a href="video.html">Video player</a></li>
                <li class="done"><a href="audio.html">Audio player</a></li>

            <li class="toc-nav-title">Tools</li>
                <li class="done"><a href="collapse.html">Collapse</a></li>
                <li class="done"><a href="color-module.html">Color module</a></li>
                <li class="done"><a href="draggable.html">Draggable</a></li>
                <li class="done"><a href="dropdown.html">Dropdown</a></li>
                <li class="done"><a href="validator.html">Form validator</a></li>
                <li class="done"><a href="hotkeys.html">Hotkeys</a></li>
                <li class="done"><a href="mouse-wheel.html">Mouse wheel</a></li>
                <li class="done"><a href="micro-tpl.html">Micro templates</a></li>
                <li class="done"><a href="ripple.html">Ripple</a></li>
                <li class="done"><a href="storage.html">Storage</a></li>
                <li class="done"><a href="session-storage.html">Session storage</a></li>
                <li class="done"><a href="scroll-events.html">Scroll events</a></li>
                <li class="done"><a href="sorter.html">Sorter</a></li>
                <li class="done"><a href="touch.html">Touch and swipe</a></li>

        </ul>
    </div>
    <div class="doc-nav-item">
        <a href="clear.html">Utilities</a>
        <ul class="toc-nav">
            <li class="done"><a href="animation.html">Animations</a></li>
            <li class="done"><a href="border.html">Border</a></li>
            <li class="done"><a href="clear.html">Clear float</a></li>
            <li class="done"><a href="colors.html">Colors</a></li>
            <li class="done"><a href="cursors.html">Cursors</a></li>
            <li class="done"><a href="display.html">Display &amp; visibility</a></li>
            <li class="done"><a href="embed.html">Embed</a></li>
            <li class="done"><a href="easing.html">Easing</a></li>
            <li class="done"><a href="extensions.html">Extensions</a></li>
            <li class="done"><a href="flex.html">Flex</a></li>
            <li class="done"><a href="functions.html">Functions</a></li>
            <li class="done"><a href="float.html">Float</a></li>
            <li class="done"><a href="position.html">Position</a></li>
            <li class="done"><a href="sizing.html">Sizing</a></li>
            <li class="done"><a href="spacing.html">Spacing</a></li>
        </ul>
    </div>
    <div class="doc-nav-item">
        <a href="icons.html">Additional</a>
        <ul class="toc-nav">
            <li class="done"><a href="icons.html">Metro Icon Font</a></li>
            <li class="done"><a href="color-schemes.html">Color Schemes</a></li>
            <li><a href="#">Builder</a></li>
        </ul>
    </div>
</nav>

<script>

    var initDocSearchEngine = function(){
        docsearch({
            apiKey: '00a53b92ba6ed063bec0a9320e60d4e6',
            indexName: 'metroui',
            inputSelector: '#search_input',
            debug: false // Set debug to true if you want to inspect the dropdown
        });
    };

    var href = window.location.pathname.substring(window.location.pathname.lastIndexOf('/')+1);
    var link = $("#doc-nav a[href='"+href+"']");
    var item = link.closest(".doc-nav-item");
    var menu = item.find(".toc-nav");
    var dov_nav = $("#doc-nav");

    dov_nav.find(".toc-nav").hide(0);
    menu.show(0, function(){
        link.parent().addClass("active");
        dov_nav.animate({
            scrollTop: link.offset().top - dov_nav.offset().top
        });
    })
</script>