<div class="topnav">
    <div class="container-fluid">
        <nav class="navbar navbar-light navbar-expand-lg topnav-menu">

            <div class="collapse navbar-collapse" id="topnav-menu-content">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link arrow-none" href="index.html" id="topnav-dashboard" role="button"
                            aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-view-dashboard me-1"></i> Dashboard
                        </a>
                        
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-ui" role="button"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-invert-colors me-1"></i> UI Elements <div class="arrow-down"></div>
                        </a>

                        <div class="dropdown-menu mega-dropdown-menu dropdown-mega-menu-xl" aria-labelledby="topnav-ui">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div>
                                        <a href="ui-buttons.html" class="dropdown-item">Buttons</a>
                                        <a href="ui-cards.html" class="dropdown-item">Cards</a>
                                        <a href="ui-avatars.html" class="dropdown-item">Avatars</a>
                                        <a href="ui-tabs-accordions.html" class="dropdown-item">Tabs & Accordions</a>
                                        <a href="ui-modals.html" class="dropdown-item">Modals</a>
                                        <a href="ui-progress.html" class="dropdown-item">Progress</a>

                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div>
                                        <a href="ui-notifications.html" class="dropdown-item">Notifications</a>
                                        <a href="ui-offcanvas.html" class="dropdown-item">Offcanvas</a>
                                        <a href="ui-placeholders.html" class="dropdown-item">Placeholders</a>
                                        <a href="ui-spinners.html" class="dropdown-item">Spinners</a>
                                        <a href="ui-images.html" class="dropdown-item">Images</a>
                                        <a href="ui-carousel.html" class="dropdown-item">Carousel</a>
                                        
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div>
                                        <a href="ui-video.html" class="dropdown-item">Embed Video</a>
                                        <a href="ui-dropdowns.html" class="dropdown-item">Dropdowns</a>
                                        <a href="ui-tooltips-popovers.html" class="dropdown-item">Tooltips & Popovers</a>
                                        <a href="ui-general.html" class="dropdown-item">General UI</a>
                                        <a href="ui-typography.html" class="dropdown-item">Typography</a>
                                        <a href="ui-grid.html" class="dropdown-item">Grid</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-apps" role="button"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe-grid me-1"></i> Apps <div class="arrow-down"></div>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="topnav-apps">

                            <a href="apps-calendar.html" class="dropdown-item">Calendar</a>
                            <a href="apps-chat.html" class="dropdown-item">Chat</a>

                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-email"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Email <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-email">
                                    <a href="email-inbox.html" class="dropdown-item">Inbox</a>
                                    <a href="email-templates.html" class="dropdown-item">Email Templates</a>
                                </div>
                            </div> 

                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-task"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Tasks <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-task">
                                    <a href="task-details.html" class="dropdown-item">Details</a>
                                    <a href="task-kanban-board.html" class="dropdown-item">Kanban Board</a>
                                </div>
                            </div> 
                            <div class="dropdown">
                                <a class="dropdown-item arrow-none" href="apps-projects.html" id="topnav-contact"
                                    role="button" aria-haspopup="true" aria-expanded="false">
                                    Projects
                                </a>
                            </div>

                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-contacts"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Contacts <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-contacts">
                                    <a href="contacts-list.html" class="dropdown-item">Members List</a>
                                    <a href="contacts-profile.html" class="dropdown-item">Profile</a>
                                </div>
                            </div>
                        </div>
                    </li>

                    

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-components" role="button"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-lifebuoy me-1"></i> Components <div class="arrow-down"></div>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="topnav-components">
                            <a href="widgets.html" class="dropdown-item">Widgets</a>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-extendedui"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Extended UI <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-extendedui">
                                    <a href="extended-range-slider.html" class="dropdown-item">Range Slider</a>
                                    <a href="extended-sweet-alert.html" class="dropdown-item">Sweet Alert</a>
                                    <a href="extended-draggable-cards.html" class="dropdown-item">Draggable Cards</a>
                                    <a href="extended-tour.html" class="dropdown-item">Tour Page</a>
                                    <a href="extended-notification.html" class="dropdown-item">Notification</a>
                                    <a href="extended-treeview.html" class="dropdown-item">Tree View</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-form"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Forms <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-form">
                                    <a href="forms-elements.html" class="dropdown-item">General Elements</a>
                                    <a href="forms-advanced.html" class="dropdown-item">Advanced</a>
                                    <a href="forms-validation.html" class="dropdown-item">Validation</a>
                                    <a href="forms-wizard.html" class="dropdown-item">Wizard</a>
                                    <a href="forms-quilljs.html" class="dropdown-item">Quilljs Editor</a>
                                    <a href="forms-pickers.html" class="dropdown-item">Pickers</a>
                                    <a href="forms-file-uploads.html" class="dropdown-item">File Uploads</a>
                                    <a href="forms-x-editable.html" class="dropdown-item">X Editable</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-charts"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                   Charts <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-charts">
                                    <a href="charts-flot.html" class="dropdown-item">Flot Charts</a>
                                    <a href="charts-morris.html" class="dropdown-item">Morris Charts</a>
                                    <a href="charts-chartjs.html" class="dropdown-item">Chartjs Charts</a>
                                    <a href="charts-chartist.html" class="dropdown-item">Chartist Charts</a>
                                    <a href="charts-sparklines.html" class="dropdown-item">Sparklines Charts</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-table"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Tables <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-table">
                                    <a href="tables-basic.html" class="dropdown-item">Basic Tables</a>
                                    <a href="tables-datatables.html" class="dropdown-item">Data Tables</a>
                                    <a href="tables-editable.html" class="dropdown-item">Editable Tables</a>
                                    <a href="tables-responsive.html" class="dropdown-item">Responsive Tables</a>
                                    <a href="tables-tablesaw.html" class="dropdown-item">Tablesaw Tables</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-icons"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Icons <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-icons">
                                    <a href="icons-feather.html" class="dropdown-item">Feather Icons</a>
                                    <a href="icons-mdi.html" class="dropdown-item">Material Design Icons</a>
                                    <a href="icons-dripicons.html" class="dropdown-item">Dripicons</a>
                                    <a href="icons-font-awesome.html" class="dropdown-item">Font Awesome 5</a>
                                    <a href="icons-themify.html" class="dropdown-item">Themify</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-map"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Maps <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-map">
                                    <a href="maps-google.html" class="dropdown-item">Google Maps</a>
                                    <a href="maps-vector.html" class="dropdown-item">Vector Maps</a>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-pages" role="button"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-cards-outline me-1"></i> Pages <div class="arrow-down"></div>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="topnav-pages">
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-auth"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Auth Style <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-auth">
                                    <a href="auth-login.html" class="dropdown-item">Log In</a>
                                    <a href="auth-register.html" class="dropdown-item">Register</a>
                                    <a href="auth-recoverpw.html" class="dropdown-item">Recover Password</a>
                                    <a href="auth-lock-screen.html" class="dropdown-item">Lock Screen</a>
                                    <a href="auth-confirm-mail.html" class="dropdown-item">Confirm Mail</a>
                                    <a href="auth-logout.html" class="dropdown-item">Logout</a>
                                </div>
                            </div>

                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-error"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Errors <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-error">
                                    <a href="pages-404.html" class="dropdown-item">Error 404</a>
                                    <a href="pages-500.html" class="dropdown-item">Error 500</a>
                                </div>
                            </div>

                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-utility"
                                    role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Utility <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-utility">
                                    <a href="pages-pricing.html" class="dropdown-item">Pricing</a>
                                    <a href="pages-timeline.html" class="dropdown-item">Timeline</a>
                                    <a href="pages-invoice.html" class="dropdown-item">Invoice</a>
                                    <a href="pages-faqs.html" class="dropdown-item">FAQs</a>
                                    <a href="pages-gallery.html" class="dropdown-item">Gallery</a>
                                    <a href="pages-maintenance.html" class="dropdown-item">Maintenance</a>
                                    <a href="pages-coming-soon.html" class="dropdown-item">Coming Soon</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-layout" role="button"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-card-bulleted-settings-outline me-1"></i> Layouts <div class="arrow-down"></div>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="topnav-layout">
                            <a href="layouts-horizontal.html" class="dropdown-item">Horizontal</a>
                            <a href="index.html" class="dropdown-item">Vertical</a>
                            <a href="layouts-preloader.html" class="dropdown-item">Preloader</a>
                        </div>
                    </li>
                </ul> <!-- end navbar-->
            </div> <!-- end .collapsed-->
        </nav>
    </div> <!-- end container-fluid -->
</div> <!-- end topnav-->