Navbar and Drawer (With Layout)

View Code
<body>
    <!-- Top Navbar -->
    <nav class="ms-nav navbar navbar-expand-sm bg-teal-700 navbar-dark">
        <!-- Hamburger button for the sidebar -->
        <i class="ms-sidebar-toggle material-icons text-white">&#xE5D2;</i>
        <a class="navbar-brand" href="javascript:">
            Brand
        </a>
    </nav>

    <section class="ms-root">
        <!-- Sidebar -->
        <aside class="ms-sidebar bg-light">
            <!-- Sidebar branding area -->
            <div class="sidebar-brand bg-light">
                <a class="navbar-brand text-dark" href="javascript:">
                     Brand
                </a>
                <!-- Sidebar Close button -->
                <i class="nav-close-btn material-icons">&#xE5CD;</i>
            </div>
            <ul class="nav flex-column">
                <!-- Menu -->
                <li class="nav-item">
                     <a class="nav-link text-dark" href="javascript:">
                         Link
                     </a>
                </li>
                <li class="nav-item">
                     <a class="nav-link text-dark" href="javascript:">
                         Link
                     </a>
                </li>
                <!-- Sub Menu Link A -->
                <li class="nav-item">
                     <a class="nav-link text-dark sub-menu-link" href="javascript:">
                         Menu A <i class="material-icons">keyboard_arrow_right</i>
                     </a>
                </li>
                <!-- Sub Menu A -->
                <li class="nav-item sub-menu-container">
                     <ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                     </ul>
                </li>
                <!-- Sub Menu Link B -->
                <li class="nav-item">
                     <a class="nav-link text-dark sub-menu-link" href="javascript:">
                         Menu B <i class="material-icons">keyboard_arrow_right</i>
                     </a>
                </li>
                <!-- Sub Menu B -->
                <li class="nav-item sub-menu-container">
                     <ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                     </ul>
                </li>
            </ul>
        </aside>

        <!-- Container -->
        <div class="ms-container">
            <label class="sample">
                Your Contents Here
            </label>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-grey-800 text-white">
        Footer
    </footer>
</body>
View Code
<body>
    <!-- Top Navbar -->
    <nav class="ms-nav navbar navbar-expand-sm bg-teal-700 navbar-dark">
        <!-- Hamburger button for the sidebar -->
        <i class="ms-sidebar-toggle material-icons text-white">&#xE5D2;</i>
        <a class="navbar-brand" href="javascript:">
            Brand
        </a>
    </nav>

    <section class="ms-root">
        <!-- Sidebar -->
        <aside class="ms-sidebar --visible bg-light">
            <!-- Sidebar branding area -->
            <div class="sidebar-brand bg-light">
                <a class="navbar-brand text-dark" href="javascript:">
                     Brand
                </a>
                <!-- Sidebar Close button -->
                <i class="nav-close-btn material-icons">&#xE5CD;</i>
            </div>
            <ul class="nav flex-column">
                <!-- Menu -->
                <li class="nav-item">
                     <a class="nav-link text-dark" href="javascript:">
                         Link
                     </a>
                </li>
                <li class="nav-item">
                     <a class="nav-link text-dark" href="javascript:">
                         Link
                     </a>
                </li>
                <!-- Sub Menu Link A -->
                <li class="nav-item">
                     <a class="nav-link text-dark sub-menu-link" href="javascript:">
                         Menu A <i class="material-icons">keyboard_arrow_right</i>
                     </a>
                </li>
                <!-- Sub Menu A -->
                <li class="nav-item sub-menu-container">
                     <ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                     </ul>
                </li>
                <!-- Sub Menu Link B -->
                <li class="nav-item">
                     <a class="nav-link text-dark sub-menu-link" href="javascript:">
                         Menu B <i class="material-icons">keyboard_arrow_right</i>
                     </a>
                </li>
                <!-- Sub Menu B -->
                <li class="nav-item sub-menu-container">
                     <ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                     </ul>
                </li>
            </ul>
        </aside>

        <!-- Container -->
        <div class="ms-container">
            <label class="sample">
                Your Contents Here
            </label>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-grey-800 text-white">
        Footer
    </footer>
</body>
View Code
<body>
    <!-- Top Navbar -->
    <nav class="ms-nav navbar navbar-expand-sm bg-teal-700 navbar-dark fixed-top">
        <!-- Hamburger button for the sidebar -->
        <i class="ms-sidebar-toggle material-icons text-white">&#xE5D2;</i>
        <a class="navbar-brand" href="javascript:">
            Brand
        </a>
    </nav>

    <section class="ms-root">
        <!-- Sidebar -->
        <aside class="ms-sidebar --visible --fixed bg-light">
            <!-- Sidebar branding area -->
            <div class="sidebar-brand bg-light">
                <a class="navbar-brand text-dark" href="javascript:">
                     Brand
                </a>
                <!-- Sidebar Close button -->
                <i class="nav-close-btn material-icons">&#xE5CD;</i>
            </div>
            <ul class="nav flex-column">
                <!-- Menu -->
                <li class="nav-item">
                     <a class="nav-link text-dark" href="javascript:">
                         Link
                     </a>
                </li>
                <li class="nav-item">
                     <a class="nav-link text-dark" href="javascript:">
                         Link
                     </a>
                </li>
                <!-- Sub Menu Link A -->
                <li class="nav-item">
                     <a class="nav-link text-dark sub-menu-link" href="javascript:">
                         Menu A <i class="material-icons">keyboard_arrow_right</i>
                     </a>
                </li>
                <!-- Sub Menu A -->
                <li class="nav-item sub-menu-container">
                     <ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                     </ul>
                </li>
                <!-- Sub Menu Link B -->
                <li class="nav-item">
                     <a class="nav-link text-dark sub-menu-link" href="javascript:">
                         Menu B <i class="material-icons">keyboard_arrow_right</i>
                     </a>
                </li>
                <!-- Sub Menu B -->
                <li class="nav-item sub-menu-container">
                     <ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" href="javascript:">
                                 Menu Item
                             </a>
                         </li>
                     </ul>
                </li>
            </ul>
        </aside>

        <!-- Container -->
        <div class="ms-container">
            <label class="sample">
                Your Contents Here
            </label>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-grey-800 text-white">
        Footer
    </footer>
</body>