Kata hari poluwanda mata me demo site eken side navagation ekek witarak code eke ganna hati kiyanna reuse karanna
https://demo.dashboardpack.com/architectui-html-pro/
https://demo.dashboardpack.com/architectui-html-pro/
Latest ads
-
Gemini AI PRO 18 months Offer- Hawaka
- Updated:
-
koko account
- DasunEranga
- Updated:
-
koko account
- DasunEranga
- Updated:
Bootstrap 4 side navi bar
- Thread starter MIB_srilanka
- Start date
HTML:
<div class="scrollbar-sidebar ps ps--active-y">
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu metismenu">
<li class="app-sidebar__heading">Menu</li>
<li class="mm-active">
<a href="#" aria-expanded="true">
<i class="metismenu-icon pe-7s-rocket"></i>
Dashboards
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse mm-show">
<li>
<a href="index.html" class="mm-active" aria-expanded="false">
<i class="metismenu-icon">
</i>Analytics
</a>
</li>
<li>
<a href="dashboards-commerce.html" aria-expanded="false">
<i class="metismenu-icon">
</i>Commerce
</a>
</li>
<li>
<a href="dashboards-sales.html" aria-expanded="false">
<i class="metismenu-icon">
</i>Sales
</a>
</li>
<li class="">
<a href="#" aria-expanded="false">
<i class="metismenu-icon"></i>
Minimal
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse" style="height: 7.05px;">
<li>
<a href="dashboards-minimal-1.html">
<i class="metismenu-icon">
</i>Variation 1
</a>
</li>
<li>
<a href="dashboards-minimal-2.html">
<i class="metismenu-icon">
</i>Variation 2
</a>
</li>
</ul>
</li>
<li>
<a href="dashboards-crm.html" aria-expanded="false">
<i class="metismenu-icon"></i>
CRM
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-browser"></i>
Pages
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="pages-login.html">
<i class="metismenu-icon"></i>
Login
</a>
</li>
<li>
<a href="pages-login-boxed.html">
<i class="metismenu-icon">
</i>Login Boxed
</a>
</li>
<li>
<a href="pages-register.html">
<i class="metismenu-icon">
</i>Register
</a>
</li>
<li>
<a href="pages-register-boxed.html">
<i class="metismenu-icon">
</i>Register Boxed
</a>
</li>
<li>
<a href="pages-forgot-password.html">
<i class="metismenu-icon">
</i>Forgot Password
</a>
</li>
<li>
<a href="pages-forgot-password-boxed.html">
<i class="metismenu-icon">
</i>Forgot Password Boxed
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-plugin"></i>
Applications
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="apps-mailbox.html">
<i class="metismenu-icon">
</i>Mailbox
</a>
</li>
<li>
<a href="apps-chat.html">
<i class="metismenu-icon">
</i>Chat
</a>
</li>
<li>
<a href="apps-faq-section.html">
<i class="metismenu-icon">
</i>FAQ Section
</a>
</li>
<li>
<a href="#">
<i class="metismenu-icon"></i>
Forums
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="apps-forum-list.html">
<i class="metismenu-icon">
</i>Forum Listing
</a>
</li>
<li>
<a href="apps-forum-threads.html">
<i class="metismenu-icon">
</i>Forum Threads
</a>
</li>
<li>
<a href="apps-forum-discussion.html">
<i class="metismenu-icon">
</i>Forum Discussion
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="app-sidebar__heading">UI Components</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-diamond"></i>
Elements
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="#">
<i class="metismenu-icon"></i>
Buttons
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="elements-buttons-standard.html">
<i class="metismenu-icon">
</i>Standard
</a>
</li>
<li>
<a href="elements-buttons-pills.html">
<i class="metismenu-icon">
</i>Pills
</a>
</li>
<li>
<a href="elements-buttons-square.html">
<i class="metismenu-icon">
</i>Square
</a>
</li>
<li>
<a href="elements-buttons-shadow.html">
<i class="metismenu-icon">
</i>Shadow
</a>
</li>
<li>
<a href="elements-buttons-icons.html">
<i class="metismenu-icon">
</i>With Icons
</a>
</li>
</ul>
</li>
<li>
<a href="elements-dropdowns.html">
<i class="metismenu-icon">
</i>Dropdowns
</a>
</li>
<li>
<a href="elements-icons.html">
<i class="metismenu-icon">
</i>Icons
</a>
</li>
<li>
<a href="elements-badges-labels.html">
<i class="metismenu-icon">
</i>Badges
</a>
</li>
<li>
<a href="elements-cards.html">
<i class="metismenu-icon">
</i>Cards
</a>
</li>
<li>
<a href="elements-loaders.html">
<i class="metismenu-icon">
</i>Loading Indicators
</a>
</li>
<li>
<a href="elements-list-group.html">
<i class="metismenu-icon">
</i>List Groups
</a>
</li>
<li>
<a href="elements-navigation.html">
<i class="metismenu-icon">
</i>Navigation Menus
</a>
</li>
<li>
<a href="elements-timelines.html">
<i class="metismenu-icon">
</i>Timeline
</a>
</li>
<li>
<a href="elements-utilities.html">
<i class="metismenu-icon">
</i>Utilities
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-car"></i>
Components
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="components-tabs.html">
<i class="metismenu-icon">
</i>Tabs
</a>
</li>
<li>
<a href="components-accordions.html">
<i class="metismenu-icon">
</i>Accordions
</a>
</li>
<li>
<a href="components-notifications.html">
<i class="metismenu-icon">
</i>Notifications
</a>
</li>
<li>
<a href="components-modals.html">
<i class="metismenu-icon">
</i>Modals
</a>
</li>
<li>
<a href="components-loading-blocks.html">
<i class="metismenu-icon">
</i>Loading Blockers
</a>
</li>
<li>
<a href="components-progress-bar.html">
<i class="metismenu-icon">
</i>Progress Bar
</a>
</li>
<li>
<a href="components-tooltips-popovers.html">
<i class="metismenu-icon">
</i>Tooltips & Popovers
</a>
</li>
<li>
<a href="components-carousel.html">
<i class="metismenu-icon">
</i>Carousel
</a>
</li>
<li>
<a href="components-calendar.html">
<i class="metismenu-icon">
</i>Calendar
</a>
</li>
<li>
<a href="components-pagination.html">
<i class="metismenu-icon">
</i>Pagination
</a>
</li>
<li>
<a href="components-count-up.html">
<i class="metismenu-icon">
</i>Count Up
</a>
</li>
<li>
<a href="components-scrollable-elements.html">
<i class="metismenu-icon">
</i>Scrollable
</a>
</li>
<li>
<a href="components-tree-view.html">
<i class="metismenu-icon">
</i>Tree View
</a>
</li>
<li>
<a href="components-maps.html">
<i class="metismenu-icon">
</i>Maps
</a>
</li>
<li>
<a href="components-ratings.html">
<i class="metismenu-icon">
</i>Ratings
</a>
</li>
<li>
<a href="components-image-crop.html">
<i class="metismenu-icon">
</i>Image Crop
</a>
</li>
<li>
<a href="components-guided-tours.html">
<i class="metismenu-icon">
</i>Guided Tours
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-display2"></i>
Tables
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="tables-data-tables.html">
<i class="metismenu-icon">
</i>Data Tables
</a>
</li>
<li>
<a href="tables-regular.html">
<i class="metismenu-icon">
</i>Regular Tables
</a>
</li>
<li>
<a href="tables-grid.html">
<i class="metismenu-icon">
</i>Grid Tables
</a>
</li>
</ul>
</li>
<li class="app-sidebar__heading">Dashboard Widgets</li>
<li>
<a href="widgets-chart-boxes.html">
<i class="metismenu-icon pe-7s-graph">
</i>Chart Boxes 1
</a>
</li>
<li>
<a href="widgets-chart-boxes-2.html">
<i class="metismenu-icon pe-7s-way">
</i>Chart Boxes 2
</a>
</li>
<li>
<a href="widgets-chart-boxes-3.html">
<i class="metismenu-icon pe-7s-ball">
</i>Chart Boxes 3
</a>
</li>
<li>
<a href="widgets-profile-boxes.html">
<i class="metismenu-icon pe-7s-id">
</i>Profile Boxes
</a>
</li>
<li class="app-sidebar__heading">Forms</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-light"></i>
Elements
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="forms-controls.html">
<i class="metismenu-icon">
</i>Controls
</a>
</li>
<li>
<a href="forms-layouts.html">
<i class="metismenu-icon">
</i>Layouts
</a>
</li>
<li>
<a href="forms-validation.html">
<i class="metismenu-icon">
</i>Validation
</a>
</li>
<li>
<a href="forms-wizard.html">
<i class="metismenu-icon">
</i>Wizard
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-joy"></i>
Widgets
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul class="mm-collapse">
<li>
<a href="forms-datepicker.html">
<i class="metismenu-icon">
</i>Datepicker
</a>
</li>
<li>
<a href="forms-range-slider.html">
<i class="metismenu-icon">
</i>Range Slider
</a>
</li>
<li>
<a href="forms-input-selects.html">
<i class="metismenu-icon">
</i>Input Selects
</a>
</li>
<li>
<a href="forms-toggle-switch.html">
<i class="metismenu-icon">
</i>Toggle Switch
</a>
</li>
<li>
<a href="forms-wysiwyg-editor.html">
<i class="metismenu-icon">
</i>WYSIWYG Editor
</a>
</li>
<li>
<a href="forms-input-mask.html">
<i class="metismenu-icon">
</i>Input Mask
</a>
</li>
<li>
<a href="forms-clipboard.html">
<i class="metismenu-icon">
</i>Clipboard
</a>
</li>
<li>
<a href="forms-textarea-autosize.html">
<i class="metismenu-icon">
</i>Textarea Autosize
</a>
</li>
</ul>
</li>
<li class="app-sidebar__heading">Charts</li>
<li>
<a href="charts-chartjs.html">
<i class="metismenu-icon pe-7s-graph2">
</i>ChartJS
</a>
</li>
<li>
<a href="charts-apexcharts.html">
<i class="metismenu-icon pe-7s-graph">
</i>Apex Charts
</a>
</li>
<li>
<a href="charts-sparklines.html">
<i class="metismenu-icon pe-7s-graph1">
</i>Chart Sparklines
</a>
</li>
</ul>
</div>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; height: 884px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 772px;"></div></div></div>
