Material Menu

Note: Markup for Material menu, Sidebar menu, Iconbar menu and Boxed menu is same. To change either menu please refer to the below markup.

To change the material menu please refer the following file.

Location: menus/material-sidebar.html


<ul class="sidebar-accordion">

    <li><a href="index.php"><i class="icon-display4"></i><span class="list-label"> Dashboard</span></a></li>
    <li><a href="index_analytics.php"><i class="icon-chart"></i><span class="list-label"> Analytics Dashboard</span></a></li>
    <li><a href="index_store.php"><i class="icon-store2"></i><span class="list-label"> Store dashboard</span></a></li>

    <li class="list-title">Apps</li>
    <li><a href="#"><i class="icon-cart2"></i> <span>E-commerce</span></a>
        <ul>
            <li><a href="ecom_products.php">Products</a></li>
            <li><a href="ecom_product.php">Single product</a></li>
            <li><a href="ecom_orders.php">Orders list</a></li>
            <li><a href="ecom_cart.php">My Cart</a></li>
            <li><a href="ecom_checkout.php">Checkout</a></li>
        </ul>
    </li>
    <li><a href="people.php"><i class="icon-user"></i> <span>People</span></a></li>
    <li><a href="messages.php"><i class="icon-comment-discussion"></i> <span>Messages</span></a></li>
    <li><a href="emails.php"><i class="icon-envelop"></i> <span>Emails</span></a></li>
    <li><a href="#"><i class="icon-briefcase"></i> <span>Projects</span></a>
        <ul>
            <li><a href="projects_list.php">Projects list</a></li>
            <li><a href="projects_details.php">Project details</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-cash3"></i> <span>Invoice</span></a>
        <ul>
            <li><a href="invoice_list.php">Invoice list</a></li>
            <li><a href="invoice_template.php">Invoice template</a></li>
        </ul>
    </li>

    <li class="list-title">Content</li>
    <li>
        <a href="#"><i class="icon-puzzle"></i><span> Widgets</span></a>
        <ul>
            <li><a href="widgets_dashboard.php">Dashboard Widgets</a></li>
            <li><a href="widgets_testimonials.php">Testimonials</a></li>
            <li><a href="widgets_hover_effects.php">Hover Effects</a></li>
            <li><a href="widgets_team.php">Team Showcase</a></li>
            <li><a href="widgets_news_sliders.php">News Sliders</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-grid2"></i><span> UI elements</span></a>
        <ul>
            <li><a href="ui_accordions.php">Accordions</a></li>
			<li><a href="ui_alerts.php">Alerts</a></li>
			<li><a href="ui_buttons.php">Buttons</a></li>
			<li><a href="ui_dropdowns.php">Dropdowns</a></li>
			<li><a href="ui_badges.php">Badges</a></li>
			<li><a href="ui_lists.php">List groups</a></li>
			<li><a href="ui_media_objects.php">Media objects</a></li>
			<li><a href="ui_modals.php">Modals</a></li>
			<li><a href="ui_pagination.php">Pagination</a></li>
			<li><a href="ui_tabs.php">Tabs</a></li>
			<li><a href="ui_pills.php">Pills</a></li>
			<li><a href="ui_tooltips.php">Tooltips</a></li>
			<li><a href="ui_progress_bars.php">Progress bars</a></li>
            <li><a href="ui_thumbnails.php">Thumbnails</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-puzzle2"></i><span> Content Appearance</span></a>
        <ul>
            <li><a href="appearance_cards.php">Cards</a></li>
            <li><a href="appearance_typography.php">Typography</a></li>
            <li><a href="appearance_text_styling.php">Text styling</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-cube3"></i><span> Components</span></a>
        <ul>
            <li><a href="components_card_elements.php">Card elements</a></li>
            <li><a href="components_draggable_cards.php">Draggable cards</a></li>
            <li><a href="components_carousel.php">Carousel slider</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-rocket"></i><span> Material snippets</span></a>
        <ul>
            <li><a href="snippets_fab_buttons.php">Fab buttons</a></li>
            <li><a href="snippets_loaders.php">Page loaders</a></li>
        </ul>
    </li>
    <li><a href="icons.php"><i class="icon-heart5"></i> <span>Icons</span></a></li>
    <li><a href="animations.php"><i class="spinner icon-spinner2"></i> <span>CSS3 animations</span></a></li>
    <li><a href="color_system.php"><i class="icon-droplet"></i> <span>Color system</span></a></li>
    <li><a href="helper_classes.php"><i class="icon-magic-wand"></i> <span>Helper classes</span></a></li>
    <li><a href="grid_system.php"><i class="icon-grid6"></i> <span>Grid system</span></a></li>

    <li class="list-title">Forms</li>
    <li>
        <a href="#"><i class="icon-select2"></i> <span>Form components</span></a>
        <ul>
            <li><a href="form_inputs_basic.php">Basic elements</a></li>
            <li><a href="form_input_groups.php">Input groups</a></li>
            <li><a href="form_controls_extended.php">Extended controls</a></li>
            <li><a href="form_bootstrap_touchspin.php">Bootstrap touchspin</a></li>
            <li><a href="form_checkboxes_radios.php">Checkboxes & radios</a></li>
            <li><a href="form_select2.php">Select2</a></li>
            <li><a href="form_switchery.php">Switchery</a></li>
            <li><a href="form_noui_slider.php">NoUI slider</a></li>
            <li><a href="form_wizard.php">Form wizard</a></li>
            <li><a href="form_validations.php">Form validations</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-spell-check"></i> <span>Text Editors</span></a>
        <ul>
            <li><a href="editor_ckeditor.php">CKEditor</a></li>
            <li><a href="editor_tinymce.php">TinyMCE editor</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-eyedropper2"></i> <span>Pickers</span></a>
        <ul>
            <li><a href="picker_date.php">Datetime picker</a></li>
            <li><a href="picker_time.php">Time picker</a></li>
            <li><a href="picker_color.php">Color picker</a></li>
        </ul>
    </li>

    <li class="list-title">Charts & Graphs</li>
    <li><a href="#"><i class="icon-stats-dots"></i> HighCharts</a>
        <ul>
            <li><a href="charts_highcharts_line.php">Line charts</a></li>
            <li><a href="charts_highcharts_area.php">Area charts</a></li>
            <li><a href="charts_highcharts_bar.php">Column and bar charts</a></li>
            <li><a href="charts_highcharts_pie.php">Pie charts</a></li>
        </ul>
    </li>
    <li><a href="charts_morrischarts.php"><i class="icon-stats-bars"></i> Morris Charts</a></li>
    <li><a href="charts_sparklinecharts.php"><i class="icon-stats-bars2"></i> Sparkline Charts</a></li>
    <li><a href="charts_peitycharts.php"><i class="icon-pie-chart2"></i> Peity Charts</a></li>
    <li><a href="#"><i class="icon-chart"></i> <span>Google charts</span></a>
        <ul>
            <li><a href="charts_google_line.php">Line & area charts</a></li>
            <li><a href="charts_google_bar.php">Bar charts</a></li>
            <li><a href="charts_google_pie.php">Pie charts</a></li>
            <li><a href="charts_google_bubble.php">Bubble charts</a></li>
            <li><a href="charts_google_scatter.php">Scatter charts</a></li>
        </ul>
    </li>

    <li class="list-title">Maps</li>
    <li><a href="maps_vector.php"><i class="icon-map4"></i> Vector maps</a></li>
    <li>
        <a href="#"><i class="icon-location4"></i> <span>Google maps</span></a>
        <ul>
            <li><a href="maps_google_basic.php">Basic maps</a></li>
            <li><a href="maps_google_markers.php">Map markers</a></li>
            <li><a href="maps_google_layers.php">Layered maps</a></li>
        </ul>
    </li>

    <li class="list-title">Extensions</li>
    <li><a href="#"><i class="icon-alert"></i> <span>Notifications</span></a>
        <ul>
            <li><a href="extension_pnotify.php">PNotify notifications</a></li>
            <li><a href="extension_sweet_alert.php">Sweet alerts</a></li>
        </ul>
    </li>
    <li><a href="extension_bootstrap_uploader.php"><i class="icon-cloud-upload2"></i> <span>File uploader</span></a></li>
    <li><a href="extension_fullcalendar.php"><i class="icon-calendar2"></i> <span>Event calendar</span></a></li>
    <li><a href="#"><i class="icon-crop"></i> <span>jCrop</span></a>
        <ul>
            <li><a href="extension_jcrop_basic.php">Basic example</a></li>
            <li><a href="extension_jcrop_handlers.php">Cropping with handlers</a></li>
            <li><a href="extension_jcrop_preview.php">Image preview</a></li>
            <li><a href="extension_jcrop_transitions.php">Animations & Transitions</a></li>
            <li><a href="extension_jcrop_api.php">API demo</a></li>
        </ul>
    </li>
    <li><a href="extension_owl_carousel.php"><i class="icon-images3"></i> <span>Owl carousel</span></a></li>

    <li class="list-title">Tables</li>
    <li><a href="tables_basic.php"><i class="icon-table"></i> <span>Basic tables</span></a></li>
    <li><a href="tables_responsive.php"><i class="icon-versions"></i> <span>Responsive tables</span></a></li>
    <li>
        <a href="#"><i class="icon-table2"></i> <span>Datatables</span></a>
        <ul>
            <li><a href="datatable_basic.php">Basic datatable</a></li>
            <li><a href="datatable_advanced.php">Advanced datatables</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-alignment-unalign"></i> <span>Datatables extensions</span></a>
        <ul>
            <li><a href="datatable_extension_row_reorder.php">Row reorder</a></li>
            <li><a href="datatable_extension_column_reorder.php">Columns reorder</a></li>
            <li><a href="datatable_extension_state_saving.php">State Saving</a></li>
            <li><a href="datatable_extension_fixed_columns.php">Fixed columns</a></li>
            <li><a href="datatable_extension_fixed_header.php">Fixed header</a></li>
            <li><a href="datatable_extension_autofill.php">Auto fill</a></li>
            <li><a href="datatable_extension_key_table.php">Key table</a></li>
            <li><a href="datatable_extension_export_options.php">Export options</a></li>
            <li><a href="datatable_extension_columns_selection.php">Columns selection</a></li>
        </ul>
    </li>

    <li class="list-title">Pages</li>
    <li><a href="page_gallery.php"><i class="icon-image3"></i> <span>Media gallery</span></a></li>
    <li><a href="page_pricing_tables.php"><i class="icon-cash"></i> <span>Pricing tables</span></a></li>
    <li><a href="page_search.php"><i class="icon-search4"></i> <span>Content search</span></a></li>
    <li><a href="page_support.php"><i class="icon-lifebuoy"></i> <span>Support</span></a></li>
    <li><a href="page_knowledgebase.php"><i class="icon-help"></i> <span>Knowledgebase</span></a></li>
    <li>
        <a href="#"><i class="icon-user-lock"></i> <span>Login & registration</span></a>
        <ul>
            <li><a href="auth_login.php">Login & registration</a></li>
            <li><a href="auth_unlock.php">Unlock user</a></li>
            <li><a href="auth_recover.php">Reset password</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-users2"></i> <span>User pages</span></a>
        <ul>
            <li><a href="user_list.php">Users list</a></li>
            <li><a href="user_profile_simple.php">Simple profile</a></li>
        </ul>
    </li>
    <li><a href="page_launching.php"><i class="icon-traffic-cone"></i> <span>Launching page</span></a></li>
    <li><a href="page_maintenance.php"><i class="icon-construction"></i> <span>Maintenance</span></a></li>
    <li>
        <a href="#"><i class="icon-warning"></i> <span>Error pages</span></a>
        <ul>
            <li><a href="error_403.php">Error 403</a></li>
            <li><a href="error_404.php">Error 404</a></li>
            <li><a href="error_405.php">Error 405</a></li>
            <li><a href="error_500.php">Error 500</a></li>
            <li><a href="error_503.php">Error 503</a></li>
            <li><a href="error_offline.php">Offline page</a></li>
        </ul>
    </li>
    <li><a href="page_email_templates.php"><i class="icon-mail-read"></i> <span>Email templates</span></a></li>
    <li><a href="page_contact.php"><i class="icon-file-media"></i> <span>Contact page</span></a></li>

    <li class="list-title">Extras</li>
    <li><a href="page_empty.php"><i class="icon-file-empty"></i> <span>Empty page</span></a></li>
    <li>
        <a href="#"><i class="icon-tree7"></i> <span>Menu levels</span></a>
        <ul>
            <li><a href="#">Second level</a></li>
            <li>
                <a href="#">Second level with child</a>
                <ul>
                    <li><a href="#">Third level</a></li>
                    <li>
                        <a href="#">Third level with child</a>
                        <ul>
                            <li><a href="#">Fourth level</a></li>
                            <li><a href="#">Fourth level</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Third level</a></li>
                </ul>
            </li>
            <li><a href="#">Second level</a></li>
        </ul>
    </li>
</ul>

Sidebar User Profile

Note: To apply sidebar menu only, do not use the following markup.

To change the sidebar user profile please refer the following file.

Location: blocks/sidebar-user-profile.html


<div class="user-profile-container">
    <div class="user-profile clearfix">
        <div class="admin-user-thumb">
            <img src="img/demo/img1.jpg" alt="admin" class="rounded-circle">
        </div>
        <div class="admin-user-info text-center">
            <ul>
                <li class="username">Jane Elliott</li>
                <li><a href="#" class="tooltip-bottom" data-tooltip="Notifications"><span class="bubble">2</span><i class="icon-bell2"></i></a></li>
                <li><a href="#" class="tooltip-bottom" data-tooltip="Logout"><i class="icon-exit3"></i></a></li>
            </ul>
        </div>
    </div>
</div>