Horizontal

It contains Horizontal menu part which we can include in Horizontal layout.

<div class="horizontal_menu">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <ul id="navigation" class="slimmenu">
                    <li class="main-menu">
                        <a href="javascript:void(0)" class="menu-list {% if (page == 'index1') or (page == 'index2') or (page == 'index3') %} active{% endif %}">
                            <span class="ti-home font_18 text-primary"> </span> Dashboard
                        </a>
                        <ul>
                            <li {% if page =='index1'%} class="active" id="active" {% endif %}>
                                <a href="index.html" class="sub-list">
                                    Dashboard 1
                                </a>
                            </li>
                            <li  {% if page =='index2'%} class="active" id="active" {% endif %}>
                                <a href="index2.html" class="sub-list">
                                    Dashboard 2
                                </a>
                            </li>
                            <li  {% if page =='index3'%} class="active" id="active" {% endif %}>
                                <a href="index3.html" class="sub-list">
                                    Dashboard 3
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="main-menu">
                        <a href="javascript:void(0)" class="menu-list {% if (page == 'generalComponents') or (page == 'Navbars') or (page == 'fileUpload') or (page == 'GridView') or (page == 'buttons') or (page == 'RadioCheckbox') or (page == 'dateTimePicker')
                        or (page == 'cards') or (page == 'advancedCards') or (page == 'draggableCards') or (page == 'alerts') or (page == 'advancedAlerts') or (page == 'SweetAlert') or (page == 'Modals')  or (page == 'calendar')
                        or (page == 'gallery') or (page == 'VideoGallery') or (page == 'flippingGallery') or (page == 'fancygallery') %} active{% endif %}">
                            <span class="ti-paint-bucket font_18 text-danger"> </span> Components
                        </a>
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'generalComponents') or (page == 'Navbars') or (page == 'fileUpload') or (page == 'GridView') or (page == 'buttons') or (page == 'RadioCheckbox') or (page == 'dateTimePicker') %} active{% endif %}">UI Components</a>
                                <ul>
                                    <li {% if page =='generalComponents'%} class="active" id="active" {% endif %}>
                                        <a href="general_components.html">
                                            General Components
                                        </a>
                                    </li>
                                    <li {% if page =='Navbars'%} class="active" id="active" {% endif %}>
                                        <a href="navbars.html">
                                            Navbars
                                        </a>
                                    </li>
                                    <li {% if page =='fileUpload'%} class="active" id="active" {% endif %}>
                                        <a href="file_upload.html">
                                            File Uploads
                                        </a>
                                    </li>
                                    <li {% if page =='GridView'%} class="active" id="active" {% endif %}>
                                        <a href="grid_view.html">
                                            Grid View
                                        </a>
                                    </li>

                                    <li {% if page =='buttons'%} class="active" id="active" {% endif %}>
                                        <a href="buttons.html">
                                            Buttons
                                        </a>
                                    </li>
                                    <li {% if page =='RadioCheckbox'%} class="active" id="active" {% endif %}>
                                        <a href="radio_checkbox.html">
                                            Radio and Checkboxes
                                        </a>
                                    </li>
                                    <li {% if page =='dateTimePicker'%} class="active" id="active" {% endif %}>
                                        <a href="datetime_picker.html">
                                            Datetime Picker
                                        </a>
                                    </li>

                                </ul>
                            </li>


                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'cards') or (page == 'advancedCards') or (page == 'draggableCards') %} active{% endif %}">Cards</a>
                                <ul>
                                    <li {% if page =='cards'%} class="active" id="active" {% endif %}>
                                        <a href="cards.html">
                                            Basic Cards
                                        </a>
                                    </li>
                                    <li {% if page =='advancedCards'%} class="active" id="active" {% endif %}>
                                        <a href="advanced_cards.html">
                                            Advanced Cards
                                        </a>
                                    </li>
                                    <li {% if page =='draggableCards'%} class="active" id="active" {% endif %}>
                                        <a href="draggable_cards.html">
                                            Draggable Cards
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'alerts') or (page == 'advancedAlerts') or (page == 'SweetAlert') %} active{% endif %}"> Alerts</a>
                                <ul>
                                    <li {% if page =='alerts'%} class="active" id="active" {% endif %}>
                                        <a href="alerts.html">
                                            Alerts
                                        </a>
                                    </li>
                                    <li {% if page =='advancedAlerts'%} class="active" id="active" {% endif %}>
                                        <a href="advanced_alerts.html">
                                            Advanced Alerts
                                        </a>
                                    </li>
                                    <li {% if page =='SweetAlert'%} class="active" id="active" {% endif %}>
                                        <a href="sweetalerts.html">
                                            Sweet Alerts
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li {% if page =='Modals'%} class="active" id="active" {% endif %}>
                                <a href="modals.html">
                                    Modals
                                </a>
                            </li>
                            <li {% if page =='calendar'%} class="active" id="active" {% endif %}>
                                <a href="calendar.html">
                                    Calendar
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'gallery') or (page == 'VideoGallery') or (page == 'flippingGallery') or (page == 'fancygallery') %}  active{% endif %}"> Galleries</a>
                                <ul>
                                    <li {% if page =='gallery'%} class="active" id="active" {% endif %}>
                                        <a href="gallery1.html" class="dropdown_head">
                                            <i class="ti-angle-double-right"></i> Gallery
                                        </a>
                                    </li>
                                    <li {% if page =='VideoGallery'%} class="active" id="active" {% endif %}>
                                        <a href="video_gallery.html" class="dropdown_head">
                                            <i class="ti-angle-double-right"></i> Video Gallery
                                        </a>
                                    </li>
                                    <li {% if page =='flippingGallery'%} class="active" id="active" {% endif %}>
                                        <a href="gallery3.html" class="dropdown_head">
                                            <i class="ti-angle-double-right"></i> Flipping Gallery
                                        </a>
                                    </li>
                                    <li {% if page =='fancygallery'%} class="active" id="active" {% endif %}>
                                        <a href="gallery4.html" class="dropdown_head">
                                            <i class="ti-angle-double-right"></i> Fancy Gallery
                                        </a>
                                    </li>
                                </ul>
                            </li>

                        </ul>
                    </li>
                    <li class="main-menu">
                        <a href="javascript:void(0)" class="menu-list {% if (page == 'basicFormElements') or (page == 'advancedFormElements') or (page == 'AdvancedFormElements2') or (page == 'Summernote') or (page == 'Tinymce')
                      or (page == 'formlayouts') or (page == 'formWizards') or (page == 'formValidation') %} active{% endif %}">
                            <span class="ti-view-list font_18 text-warning"> </span>  Forms
                        </a>
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'basicFormElements') or (page == 'advancedFormElements') or (page == 'AdvancedFormElements2') %} active{% endif %}">Form Elements</a>
                                <ul>
                                    <li {% if page =='basicFormElements'%} class="active" id="active" {% endif %}>
                                        <a href="basic_form_elements.html">
                                            Basic Form Elements
                                        </a>
                                    </li>
                                    <li {% if page =='advancedFormElements'%} class="active" id="active" {% endif %}>
                                        <a href="advanced_form_elements.html">
                                            Advanced Form Elements 1
                                        </a>
                                    </li>
                                    <li {% if page =='AdvancedFormElements2'%} class="active" id="active" {% endif %}>
                                        <a href="advanced_form_elements2.html">
                                            Advanced Form Elements 2
                                        </a>
                                    </li>

                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'Summernote') or (page == 'Tinymce')%} active{% endif %}"> Form Editors</a>
                                <ul>
                                    <li {% if page =='Summernote'%} class="active" id="active" {% endif %}>
                                        <a href="summernote.html">Summernote</a>
                                    </li>
                                    <li {% if page =='Tinymce'%} class="active" id="active" {% endif %}>
                                        <a href="tinymce.html">Tinymce</a>
                                    </li>

                                </ul>
                            </li>
                            <li {% if page =='formlayouts'%} class="active" id="active" {% endif %}>
                                <a href="form_layouts.html">
                                    Form Layouts
                                </a>
                            </li>

                            <li {% if page =='formWizards'%} class="active" id="active" {% endif %}>
                                <a href="form_wizards.html">
                                    Form Wizards
                                </a>
                            </li>
                            <li {% if page =='formValidation'%} class="active" id="active" {% endif %}>
                                <a href="form_validation.html">
                                    Form Validations
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="main-menu">
                        <a href="javascript:void(0)" class="menu-list {% if (page == 'ThemifyIcons') or (page == 'fontawesomeIcons') or (page == 'IonIcons') or (page == 'LineIcons') or (page == 'VaadinIcons') or (page == 'SimpleTables') or (page == 'fooTables')
                         or (page == 'SimpleDatatables') or (page == 'datatables') or (page == 'advancedDatatables') or (page == 'colorPalette') or (page == 'Typography') or (page == 'animations') or (page == 'Swiper') or (page == 'PricingTable') or (page == 'JStree')
                          or (page == 'Slider') or (page == 'gridStack') or (page == 'cropper')%} active{% endif %}">
                            <span class="ti-brush font_18 text-danger"> </span> UI Features
                        </a>
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'ThemifyIcons') or (page == 'fontawesomeIcons') or (page == 'IonIcons') or (page == 'LineIcons') or (page == 'VaadinIcons') %} active{% endif %}">Icons</a>
                                <ul class="sub-menu">
                                    <li {% if page =='ThemifyIcons'%} class="active" id="active" {% endif %}>
                                        <a href="themify_icons.html">
                                            Themify Icons
                                        </a>
                                    </li>
                                    <li {% if page =='fontawesomeIcons'%} class="active" id="active" {% endif %}>
                                        <a href="fontawesome_icons.html">
                                            Fontawesome Icons
                                        </a>
                                    </li>

                                    <li {% if page =='IonIcons'%} class="active" id="active" {% endif %}>
                                        <a href="ion_icons.html">
                                            Ion Icons
                                        </a>
                                    </li>
                                    <li {% if page =='LineIcons'%} class="active" id="active" {% endif %}>
                                        <a href="simple_line_icons.html">
                                            Simple Line Icons
                                        </a>
                                    </li>
                                    <li {% if page =='VaadinIcons'%} class="active" id="active" {% endif %}>
                                        <a href="vaadin_icons.html">
                                            Vaadin Icons
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'SimpleTables') or (page == 'fooTables') %}  active{% endif %}">Tables</a>
                                <ul class="sub-menu">
                                    <li {% if page =='SimpleTables'%} class="active" id="active" {% endif %}>
                                        <a href="simple_tables.html">
                                            Simple tables
                                        </a>
                                    </li>
                                    <li {% if page =='fooTables'%} class="active" id="active" {% endif %}>
                                        <a href="foo_tables.html">
                                            Foo Tables
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'SimpleDatatables') or (page == 'datatables') or (page == 'advancedDatatables') %}  active{% endif %}">Data Tables</a>
                                <ul class="sub-menu">
                                    <li {% if page =='SimpleDatatables'%} class="active" id="active" {% endif %}>
                                        <a href="simple_datatables.html">
                                            Simple Datatables
                                        </a>
                                    </li>
                                    <li {% if page =='datatables'%} class="active" id="active" {% endif %}>
                                        <a href="datatables.html">
                                            Datatables
                                        </a>
                                    </li>
                                    <li {% if page =='advancedDatatables'%} class="active" id="active" {% endif %}>
                                        <a href="advanced_datatables.html">
                                            Advanced Datatables
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'colorPalette') or (page == 'Typography') or (page == 'animations') or (page == 'Swiper') or (page == 'PricingTable') or (page == 'JStree') %}  active{% endif %}">More Features</a>
                                <ul class="sub-menu">
                                    <li {% if page =='colorPalette'%} class="active" id="active" {% endif %}>
                                        <a href="color_palette.html">
                                            Color Palette
                                        </a>
                                    </li>
                                    <li {% if page =='Typography'%} class="active" id="active" {% endif %}>
                                        <a href="typography.html">
                                            Typography
                                        </a>
                                    </li>

                                    <li {% if page =='animations'%} class="active" id="active" {% endif %}>
                                        <a href="animations.html">
                                            Animations
                                        </a>
                                    </li>

                                    <li {% if page =='Swiper'%} class="active" id="active" {% endif %}>
                                        <a href="swiper.html">
                                            Swiper
                                        </a>
                                    </li>
                                    <li {% if page =='PricingTable'%} class="active" id="active" {% endif %}>
                                        <a href="pricing_table.html">
                                            Pricing Tables
                                        </a>
                                    </li>
                                    <li {% if page =='JStree'%} class="active" id="active" {% endif %}>
                                        <a href="jstree.html">
                                            Js tree
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li {% if page =='Slider'%} class="active" id="active" {% endif %}>
                                <a href="sliders.html">
                                    Sliders
                                </a>
                            </li>
                            <li {% if page =='gridStack'%} class="active" id="active" {% endif %}>
                                <a href="grid_stack.html">
                                    Grid Stack
                                </a>
                            </li>
                            <li {% if page =='cropper'%} class="active" id="active" {% endif %}>
                                <a href="cropper.html">
                                    Cropper
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="main-menu">
                        <a href="javascript:void(0)" class="menu-list {% if (page == 'lineEcharts') or (page == 'barEcharts') or (page == 'pieEcharts') or (page == 'MorrisCharts') or (page == 'SparklineChart')
                          or (page == 'LineChartist') or (page == 'barChartist') or (page == 'PieChartist') or (page == 'c3LineChart') or (page == 'c3BarChart') or (page == 'NDV3Charts') or (page == 'Rickshaw')
                           or (page == 'flotLineCharts') or (page == 'flotBarCharts') or (page == 'flotPieCharts') or (page == 'LineAmcharts') or (page == 'columnBarAmcharts') or (page == 'PieFunnelAmcharts')
                            or (page == 'gaugeAmcharts') or (page == 'PerityCharts') or (page == 'chartJs') %}  active{% endif %}">
                            <span class="ti-pie-chart font_18 text-info"> </span> Charts
                        </a>
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'lineEcharts') or (page == 'barEcharts') or (page == 'pieEcharts') %}  active{% endif %}">E Charts</a>
                                <ul>
                                    <li {% if page =='lineEcharts'%} class="active" id="active" {% endif %}>
                                        <a href="echart_line.html">
                                            Line Echarts
                                        </a>
                                    </li>
                                    <li {% if page =='barEcharts'%} class="active" id="active" {% endif %}>
                                        <a href="echart_bar.html">
                                            Bar Echarts
                                        </a>
                                    </li>
                                    <li {% if page =='pieEcharts'%} class="active" id="active" {% endif %}>
                                        <a href="echart_pie.html">
                                            Pie Ecahrts
                                        </a>
                                    </li>
                                </ul>
                            </li>


                            <li {% if page =='MorrisCharts'%} class="active" id="active" {% endif %}>
                                <a href="morris_chart.html" class="sub-list">
                                    Morris Charts
                                </a>
                            </li>
                            <li {% if page =='SparklineChart'%} class="active" id="active" {% endif %}>
                                <a href="sparkline_charts.html" class="sub-list">
                                    Sparkline Charts
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'LineChartist') or (page == 'barChartist') or (page == 'PieChartist') %}  active{% endif %}">Chartist</a>
                                <ul>
                                    <li {% if page =='LineChartist'%} class="active" id="active" {% endif %}>
                                        <a href="line_chartist.html">
                                            Line Chartist
                                        </a>
                                    </li>
                                    <li {% if page =='barChartist'%} class="active" id="active" {% endif %}>
                                        <a href="bar_chartist.html">
                                            Bar Chartist
                                        </a>
                                    </li>
                                    <li {% if page =='PieChartist'%} class="active" id="active" {% endif %}>
                                        <a href="pie_chartist.html">
                                            Pie Chartist
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'c3LineChart') or (page == 'c3BarChart') %}  active{% endif %}"> C3 Charts</a>
                                <ul>
                                    <li {% if page =='c3LineChart'%} class="active" id="active" {% endif %}>
                                        <a href="c3_line_chart.html">
                                            C3 Line Charts
                                        </a>
                                    </li>
                                    <li {% if page =='c3BarChart'%} class="active" id="active" {% endif %}>
                                        <a href="c3_bar_chart.html">
                                            C3 Bar Charts
                                        </a>
                                    </li>
                                </ul>
                            </li>


                            <li {% if page =='NDV3Charts'%} class="active" id="active" {% endif %}>
                                <a href="nvd3_charts.html" class="sub-list">
                                    NVD3 Charts
                                </a>
                            </li>
                            <li {% if page =='Rickshaw'%} class="active" id="active" {% endif %}>
                                <a href="rickshaw.html" class="sub-list">
                                    Rickshaw
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'flotLineCharts') or (page == 'flotBarCharts') or (page == 'flotPieCharts') %}  active{% endif %}">Flot Charts</a>
                                <ul>
                                    <li {% if page =='flotLineCharts'%} class="active" id="active" {% endif %}>
                                        <a href="flot_line_charts.html">
                                            Flot Line Charts
                                        </a>
                                    </li>
                                    <li {% if page =='flotBarCharts'%} class="active" id="active" {% endif %}>
                                        <a href="flot_bar_charts.html">
                                            Flot Bar Charts
                                        </a>
                                    </li>
                                    <li {% if page =='flotPieCharts'%} class="active" id="active" {% endif %}>
                                        <a href="flot_pie_charts.html">
                                            Flot Pie Charts
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'LineAmcharts') or (page == 'columnBarAmcharts') or (page == 'PieFunnelAmcharts') or (page == 'gaugeAmcharts') %}  active{% endif %}">Amcharts</a>
                                <ul>
                                    <li {% if page =='LineAmcharts'%} class="active" id="active" {% endif %}>
                                        <a href="line_amcharts.html">
                                            Line Amcharts
                                        </a>
                                    </li>
                                    <li {% if page =='columnBarAmcharts'%} class="active" id="active" {% endif %}>
                                        <a href="column_bar_amcharts.html">
                                            Bar Amcharts
                                        </a>
                                    </li>
                                    <li {% if page =='PieFunnelAmcharts'%} class="active" id="active" {% endif %}>
                                        <a href="pie_funnel_amcharts.html">
                                            Pie Funnel Amcharts
                                        </a>
                                    </li>
                                    <li {% if page =='gaugeAmcharts'%} class="active" id="active" {% endif %}>
                                        <a href="gauge_amcharts.html">
                                            Gauge Amcharts
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li {% if page =='PerityCharts'%} class="active" id="active" {% endif %}>
                                <a href="peity_charts.html" class="sub-list">
                                    Peity Charts
                                </a>
                            </li>
                            <li {% if page =='chartJs'%} class="active" id="active" {% endif %}>
                                <a href="chartjs.html" class="sub-list">
                                    Chartjs
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="main-menu">
                        <a href="javascript:void(0)" class="menu-list {% if (page == 'Widgets1') or (page == 'Widgets2') or (page == 'Widgets3') or (page == 'Inbox') or (page == 'SentMail') or (page == 'emailView') or (page == 'compose') or (page == 'drafts') or (page == 'Trash') or (page == 'allMails')
                          or (page == 'Profile1') or (page == 'Profile2') or (page == 'UserList') or (page == 'addUser') or (page == 'deleteuser')
                           or (page == 'basicGmaps') or (page == 'gmapServices') or (page == 'gmapRoutes') or (page == 'gmapUtils') or (page == 'vectormaps')
                            or (page == 'Timeline1') or (page == 'Timeline2') or (page == 'Notifications') or (page == 'Notifications2') or (page == 'PNotify')
                            or (page == 'Transitions') or (page == 'Rating') %} active{% endif %}">
                            <span class="ti-desktop font_18 text-success"> </span> UI
                        </a>
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'Widgets1') or (page == 'Widgets2') or (page == 'Widgets3')  %} active{% endif %}">Widgets</a>
                                <ul>
                                    <li {% if page =='Widgets1'%} class="active" id="active" {% endif %}>
                                        <a href="widgets1.html">
                                            Widgets 1
                                        </a>
                                    </li>
                                    <li {% if page =='Widgets2'%} class="active" id="active" {% endif %}>
                                        <a href="widgets2.html">
                                            Widgets 2
                                        </a>
                                    </li>
                                    <li {% if page =='Widgets3'%} class="active" id="active" {% endif %}>
                                        <a href="widgets3.html">
                                            Widgets 3
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'Inbox') or (page == 'SentMail') or (page == 'emailView') or (page == 'compose') or (page == 'drafts') or (page == 'Trash') or (page == 'allMails') %} %}  active{% endif %}">Emails</a>
                                <ul>
                                    <li {% if page =='Inbox'%} class="active" id="active" {% endif %}>
                                        <a href="inbox.html">
                                            <i class="ti-angle-double-right"></i> Inbox
                                        </a>
                                    </li>
                                    <li {% if page =='SentMail'%} class="active" id="active" {% endif %}>
                                        <a href="sent_mail.html">
                                            <i class="ti-angle-double-right"></i> Sent Mail
                                        </a>
                                    </li>

                                    <li {% if page =='emailView'%} class="active" id="active" {% endif %}>
                                        <a href="email_view.html">
                                            <i class="ti-angle-double-right"></i> View Mail
                                        </a>
                                    </li>
                                    <li {% if page =='compose'%} class="active" id="active" {% endif %}>
                                        <a href="compose.html">
                                            <i class="ti-angle-double-right"></i> Compose
                                        </a>
                                    </li>
                                    <li {% if page =='drafts'%} class="active" id="active" {% endif %}>
                                        <a href="drafts.html">
                                            <i class="ti-angle-double-right"></i> Drafts
                                        </a>
                                    </li>
                                    <li {% if page =='Trash'%} class="active" id="active" {% endif %}>
                                        <a href="trash.html">
                                            <i class="ti-angle-double-right"></i> Trash
                                        </a>
                                    </li>
                                    <li {% if page =='allMails'%} class="active" id="active" {% endif %}>
                                        <a href="all_mails.html">
                                            <i class="ti-angle-double-right"></i> All Mails
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'Profile1') or (page == 'Profile2') or (page == 'UserList') or (page == 'addUser') or (page == 'deleteuser')%}  active{% endif %}">Users</a>
                                <ul>
                                    <li {% if page =='Profile1'%} class="active" id="active" {% endif %}>
                                        <a href="profile1.html">
                                            <i class="ti-angle-double-right"></i> User Profile 1
                                        </a>
                                    </li>
                                    <li {% if page =='Profile2'%} class="active" id="active" {% endif %}>
                                        <a href="profile2.html">
                                            <i class="ti-angle-double-right"></i> User Profile 2
                                        </a>
                                    </li>
                                    <li {% if page =='UserList'%} class="active" id="active" {% endif %}>
                                        <a href="user_list.html">
                                            <i class="ti-angle-double-right"></i> User List
                                        </a>
                                    </li>
                                    <li {% if page =='addUser'%} class="active" id="active" {% endif %}>
                                        <a href="add_user.html">
                                            <i class="ti-angle-double-right"></i> Add User
                                        </a>
                                    </li>
                                    <li {% if page =='deleteuser'%} class="active" id="active" {% endif %}>
                                        <a href="delete_user.html">
                                            <i class="ti-angle-double-right"></i> Delete User
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript:void(0)" class="sub-list {% if (page == 'basicGmaps') or (page == 'gmapServices') or (page == 'gmapRoutes') or (page == 'gmapUtils') or (page == 'vectormaps') %}  active{% endif %}">Maps</a>
                                <ul>
                                    <li {% if page =='basicGmaps'%} class="active" id="active" {% endif %}>
                                        <a href="gmaps_basic.html">
                                            Basic Gmaps
                                        </a>
                                    </li>
                                    <li {% if page =='gmapServices'%} class="active" id="active" {% endif %}>
                                        <a href="gmaps_services.html">
                                            Gmap Services
                                        </a>
                                    </li>
                                    <li {% if page =='gmapRoutes'%} class="active" id="active" {% endif %}>
                                        <a href="gmap_routes.html">
                                            Gmap Routes
                                        </a>
                                    </li>
                                    <li {% if page =='gmapUtils'%} class="active" id="active" {% endif %}>
                                        <a href="gmap_utils.html">
                                            Gmap Utils
                                        </a>
                                    </li>
                                    <li {% if page =='vectormaps'%} class="active" id="active" {% endif %}>
                                        <a href="vectormaps.html">
                                            <i class="ti-angle-double-right"></i> Vector Maps
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript:void(0)" class="sub-list  {% if (page == 'Timeline1') or (page == 'Timeline2')  %} active{% endif %}">Timeline</a>
                                <ul class="sub-menu">
                                    <li {% if page =='Timeline1'%} class="active" id="active" {% endif %}>
                                        <a href="timeline1.html">
                                            Timeline 1
                                        </a>
                                    </li>
                                    <li {% if page =='Timeline2'%} class="active" id="active" {% endif %}>
                                        <a href="timeline2.html">
                                            Timeline 2
                                        </a>
                                    </li>

                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="sub-list  {% if (page == 'Notifications') or (page == 'Notifications2') or (page == 'PNotify')  %} active{% endif %}">Notifications</a>
                                <ul class="sub-menu">
                                    <li {% if page =='Notifications'%} class="active" id="active" {% endif %}>
                                        <a href="notifications.html">
                                            Notifications 1
                                        </a>
                                    </li>
                                    <li {% if page =='Notifications2'%} class="active" id="active" {% endif %}>
                                        <a href="notifications2.html">
                                            Notifications 2
                                        </a>
                                    </li>
                                    <li {% if page =='PNotify'%} class="active" id="active" {% endif %}>
                                        <a href="p_notify.html">
                                            P-Notify
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li {% if page =='Transitions'%} class="active" id="active" {% endif %}>
                                <a href="transitions.html">
                                    Transitions
                                </a>
                            </li>
                            <li {% if page =='Rating'%} class="active" id="active" {% endif %}>
                                <a href="rating.html">
                                    Ratings
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="main-menu">
                        <a href="javascript:void(0)" class="menu-list {% if (page == 'blank') or (page == 'Invoice') %} active{% endif %}">
                            <span class="ti-files font_18 text-warning"> </span>  Pages
                        </a>
                        <ul>
                            <li {% if page =='blank'%} class="active" id="active" {% endif %}>
                                <a href="blank.html" class="sub-list">
                                    Blank
                                </a>
                            </li>
                            <li>
                                <a href="login.html" class="sub-list">
                                    Login
                                </a>
                            </li>
                            <li>
                                <a href="register.html" class="sub-list">
                                    Register
                                </a>
                            </li>
                            <li>
                                <a href="404.html">
                                    <i class="ti-angle-double-right"></i>  404
                                </a>
                            </li>
                            <li>
                                <a href="500.html">
                                    <i class="ti-angle-double-right"></i> 500
                                </a>
                            </li>
                            <li>
                                <a href="forgot_password.html">
                                    <i class="ti-angle-double-right"></i> Forgot Password
                                </a>
                            </li>
                            <li>
                                <a href="lockscreen.html">
                                    <i class="ti-angle-double-right"></i> Lockscreen
                                </a>
                            </li>
                            <li {% if page =='Invoice'%} class="active" id="active" {% endif %}>
                                <a href="invoice.html">
                                    <i class="ti-angle-double-right"></i> Invoice
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--End header-->