3989 lines
269 KiB
HTML
3989 lines
269 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<meta content="Multipurpose, super flexible, powerful, clean modern responsive bootstrap 5 admin template"
|
|
name="description">
|
|
<meta content="admin template, ki-admin admin template, dashboard template, flat admin template, responsive admin template, web app"
|
|
name="keywords">
|
|
<meta content="la-themes" name="author">
|
|
<link href="../assets/images/logo/favicon.png" rel="icon" type="image/x-icon">
|
|
<link href="../assets/images/logo/favicon.png" rel="shortcut icon" type="image/x-icon">
|
|
|
|
<title>Dropdown | ki-admin - Premium Admin Template</title>
|
|
|
|
<!--font-awesome-css-->
|
|
<link href="../assets/vendor/fontawesome/css/all.css" rel="stylesheet">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect">
|
|
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<!-- tabler icons-->
|
|
<link href="../assets/vendor/tabler-icons/tabler-icons.css" rel="stylesheet" type="text/css">
|
|
|
|
<!--flag Icon css-->
|
|
<link href="../assets/vendor/flag-icons-master/flag-icon.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- Bootstrap css-->
|
|
<link href="../assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- prism CSS-->
|
|
<link href="../assets/vendor/prism/prism.min.css" rel="stylesheet">
|
|
|
|
<!-- simplebar css-->
|
|
<link href="../assets/vendor/simplebar/simplebar.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- App css-->
|
|
<link href="../assets/css/style.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- Responsive css-->
|
|
<link href="../assets/css/responsive.css" rel="stylesheet" type="text/css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-wrapper">
|
|
|
|
<div class="loader-wrapper">
|
|
<div class="loader_24"></div>
|
|
</div>
|
|
|
|
<!-- Menu Navigation starts -->
|
|
<nav>
|
|
<div class="app-logo">
|
|
<a class="logo d-inline-block" href="index.html">
|
|
<img alt="#" src="../assets/images/logo/1.png">
|
|
</a>
|
|
|
|
<span class="bg-light-primary toggle-semi-nav d-flex-center">
|
|
<i class="ti ti-chevron-right"></i>
|
|
</span>
|
|
|
|
<div class="d-flex align-items-center nav-profile p-3">
|
|
<span class="h-45 w-45 d-flex-center b-r-10 position-relative bg-danger m-auto">
|
|
<img alt="avatar" class="img-fluid b-r-10" src="../assets/images/avatar/woman.jpg">
|
|
<span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
|
|
</span>
|
|
<div class="flex-grow-1 ps-2">
|
|
<h6 class="text-primary mb-0"> Ninfa Monaldo</h6>
|
|
<p class="text-muted f-s-12 mb-0">Web Developer</p>
|
|
</div>
|
|
|
|
|
|
<div class="dropdown profile-menu-dropdown">
|
|
<a aria-expanded="false" data-bs-auto-close="true" data-bs-placement="top" data-bs-toggle="dropdown"
|
|
role="button">
|
|
<i class="ti ti-settings fs-5"></i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown-item">
|
|
<a class="f-w-500" href="profile.html" target="_blank">
|
|
<i class="ph-duotone ph-user-circle pe-1 f-s-20"></i> Profile Details
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a class="f-w-500" href="setting.html" target="_blank">
|
|
<i class="ph-duotone ph-gear pe-1 f-s-20"></i> Settings
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div>
|
|
<a class="f-w-500" href="dropdown.html#">
|
|
<i class="ph-duotone ph-detective pe-1 f-s-20"></i> Incognito
|
|
</a>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input form-check-primary" id="incognitoSwitch"
|
|
type="checkbox">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a class="mb-0 text-secondary f-w-500" href="sign_up.html" target="_blank">
|
|
<i class="ph-bold ph-plus pe-1 f-s-20"></i> Add account
|
|
</a>
|
|
</li>
|
|
|
|
<li class="app-divider-v dotted py-1"></li>
|
|
|
|
<li class="dropdown-item">
|
|
<a class="mb-0 text-danger" href="sign_in.html" target="_blank">
|
|
<i class="ph-duotone ph-sign-out pe-1 f-s-20"></i> Log Out
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="app-nav" id="app-simple-bar">
|
|
<ul class="main-nav p-0 mt-2">
|
|
<li class="menu-title">
|
|
<span>Dashboard</span>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#dashboard">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#home"></use>
|
|
</svg>
|
|
dashboard
|
|
<span class="badge bg-danger badge-dashboard badge-notification ms-2">New</span>
|
|
|
|
</a>
|
|
<ul class="collapse" id="dashboard">
|
|
<li><a href="index.html">Ecommerce</a></li>
|
|
<li><a href="project_dashboard.html">Project</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#apps">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#stack"></use>
|
|
</svg>
|
|
Apps
|
|
</a>
|
|
<ul class="collapse" id="apps">
|
|
<li><a href="calendar.html">Calender</a></li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#Profile-page">
|
|
Profile
|
|
</a>
|
|
<ul class="collapse" id="Profile-page">
|
|
<li><a href="profile.html">Profile</a></li>
|
|
<li><a href="setting.html">Setting</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#projects-page">
|
|
Projects Page
|
|
</a>
|
|
<ul class="collapse" id="projects-page">
|
|
<li><a href="project_app.html">projects</a></li>
|
|
<li><a href="project_details.html">projects Details</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="to_do.html">To-Do</a></li>
|
|
<li><a href="team.html">Team</a></li>
|
|
<li><a href="api.html">API</a></li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#ticket-page">
|
|
Ticket
|
|
</a>
|
|
<ul class="collapse" id="ticket-page">
|
|
<li><a href="ticket.html">Ticket</a></li>
|
|
<li><a href="ticket_details.html">Ticket Details</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#email-page">
|
|
Email Page
|
|
</a>
|
|
<ul class="collapse" id="email-page">
|
|
<li><a href="email.html"> Email</a></li>
|
|
<li><a href="read_email.html">Read Email</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#e-shop">
|
|
E-shop
|
|
</a>
|
|
<ul class="collapse" id="e-shop">
|
|
<li><a href="cart.html">Cart</a></li>
|
|
<li><a href="product.html">Product</a></li>
|
|
<li><a href="add_product.html">Add Product</a></li>
|
|
<li><a href="product_details.html">Product-Details</a></li>
|
|
<li><a href="product_list.html">Product list</a></li>
|
|
<li><a href="orders.html">Orders</a></li>
|
|
<li><a href="orders_details.html">Orders Details</a></li>
|
|
<li><a href="orders_list.html">Orders List</a></li>
|
|
<li><a href="checkout.html">Check out</a></li>
|
|
<li><a href="wishlist.html">Wishlist</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="invoice.html">Invoice</a></li>
|
|
<li><a href="chat.html">Chat</a></li>
|
|
<li><a href="file_manager.html">File manager</a></li>
|
|
<li><a href="bookmark.html">Bookmark</a></li>
|
|
<li><a href="kanban_board.html">Kanban board</a></li>
|
|
<li><a href="timeline.html">Timeline</a></li>
|
|
<li><a href="faq.html">FAQS</a></li>
|
|
<li><a href="pricing.html">Pricing</a></li>
|
|
<li><a href="gallery.html">Gallery</a></li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#blog-page">
|
|
Blog Page
|
|
</a>
|
|
<ul class="collapse" id="blog-page">
|
|
<li><a href="blog.html">Blog</a></li>
|
|
<li><a href="blog_read_more.html">Blog Details</a></li>
|
|
<li><a href="add_blog.html">Add Blog</a></li>
|
|
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="no-sub">
|
|
<a href="widget.html">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#squares"></use>
|
|
</svg>
|
|
Widgets
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-title"><span>Component</span></li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#ui-kits">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#briefcase"></use>
|
|
</svg>
|
|
UI kits
|
|
</a>
|
|
<ul class="collapse" id="ui-kits">
|
|
<li><a href="cheatsheet.html">Cheatsheet</a></li>
|
|
<li><a href="alert.html">Alert</a></li>
|
|
<li><a href="badges.html">Badges</a></li>
|
|
<li><a href="buttons.html">Buttons</a></li>
|
|
<li><a href="cards.html">Cards</a></li>
|
|
<li><a href="dropdown.html">Dropdown</a></li>
|
|
<li><a href="grid.html">Grid</a></li>
|
|
<li><a href="avatar.html">Avatar</a></li>
|
|
<li><a href="tabs.html">Tabs</a></li>
|
|
<li><a href="accordions.html">Accordions</a></li>
|
|
<li><a href="progress.html">Progress</a></li>
|
|
<li><a href="notifications.html">Notifications</a></li>
|
|
<li><a href="list.html">Lists</a></li>
|
|
<li><a href="helper_classes.html">Helper Classes</a></li>
|
|
<li><a href="background.html">Background</a></li>
|
|
<li><a href="divider.html">Divider</a></li>
|
|
<li><a href="ribbons.html">Ribbons</a></li>
|
|
<li><a href="editor.html">Editor </a></li>
|
|
<li><a href="collapse.html">Collapse</a></li>
|
|
<li><a href="footer-page.html">Footer</a></li>
|
|
<li><a href="shadow.html">Shadow</a></li>
|
|
<li><a href="wrapper.html">Wrapper</a></li>
|
|
<li><a href="bullet.html">Bullet</a></li>
|
|
<li><a href="placeholder.html">Placeholder</a></li>
|
|
<li><a href="alignment.html">Alignment Thing</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#advance-ui">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#briefcase-advance"></use>
|
|
</svg>
|
|
Advance UI
|
|
<span class=" badge rounded-pill bg-warning badge-notification ms-2">
|
|
12+
|
|
<span class="visually-hidden">unread messages</span>
|
|
</span>
|
|
</a>
|
|
<ul class="collapse" id="advance-ui">
|
|
<li><a href="modals.html">Modals</a></li>
|
|
<li><a href="offcanvas.html">Offcanvas Toggle</a></li>
|
|
<li><a href="sweetalert.html">Sweat Alert</a></li>
|
|
<li><a href="scrollbar.html">Scrollbar</a></li>
|
|
<li><a href="spinners.html">Spinners</a></li>
|
|
<li><a href="animation.html">Animation</a></li>
|
|
<li><a href="video_embed.html">Video Embed</a></li>
|
|
<li><a href="tour.html">Tour</a></li>
|
|
<li><a href="slick.html">Slider</a></li>
|
|
<li><a href="bootstrap_slider.html">Bootstrap Slider</a></li>
|
|
<li><a href="scrollpy.html">Scrollpy</a></li>
|
|
<li><a href="tooltips_popovers.html">Tooltip & Popovers</a></li>
|
|
<li><a href="ratings.html">Rating</a></li>
|
|
<li><a href="prismjs.html">Prismjs</a></li>
|
|
<li><a href="count_down.html">Count Down</a></li>
|
|
<li><a href="count_up.html"> Count up </a></li>
|
|
<li><a href="draggable.html">Draggable</a></li>
|
|
<li><a href="tree-view.html">Tree View</a></li>
|
|
<li><a href="block_ui.html">Block Ui </a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#icons">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#gift"></use>
|
|
</svg>
|
|
Icons
|
|
</a>
|
|
<ul class="collapse" id="icons">
|
|
<li><a href="fontawesome.html">Fontawesome</a></li>
|
|
<li><a href="flag_icons.html">Flag</a></li>
|
|
<li><a href="tabler-icons.html">Tabler</a></li>
|
|
<li><a href="weather_icon.html">Weather</a></li>
|
|
<li><a href="animated_icon.html">Animated</a></li>
|
|
<li><a href="iconoir_icon.html">Iconoir</a></li>
|
|
<li><a href="phosphor.html">Phosphor</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="no-sub">
|
|
<a href="misc.html">
|
|
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#rectangle"></use>
|
|
</svg>
|
|
Misc
|
|
</a>
|
|
</li>
|
|
<li class="menu-title"><span>Map & Charts </span></li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#maps">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#location"></use>
|
|
</svg>
|
|
Map
|
|
</a>
|
|
<ul class="collapse" id="maps">
|
|
<li><a href="google-map.html">Google Maps</a></li>
|
|
<li><a href="leaflet-map.html">Leaflet map</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#chart">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#chart"></use>
|
|
</svg>
|
|
Chart
|
|
</a>
|
|
<ul class="collapse" id="chart">
|
|
<li><a href="chart_js.html">Chart js</a></li>
|
|
|
|
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#apexcharts-page">
|
|
Apexcharts
|
|
</a>
|
|
<ul class="collapse" id="apexcharts-page">
|
|
<li><a href="line.html">Line</a></li>
|
|
<li><a href="area_charts.html">Area</a></li>
|
|
<li><a href="column.html">Column</a></li>
|
|
<li><a href="bar.html">Bar</a></li>
|
|
<li><a href="mixed.html">Mixed</a></li>
|
|
<li><a href="timeline_range_charts.html">Timeline & Range-Bars</a></li>
|
|
<li><a href="candlestick_charts.html">Candlestick</a></li>
|
|
<li><a href="boxplot.html">Boxplot</a></li>
|
|
<li><a href="bubble.html">Bubble</a></li>
|
|
<li><a href="scatter.html">Scatter</a></li>
|
|
<li><a href="heatmap.html">Heatmap</a></li>
|
|
<li><a href="treemap.html">Treemap</a></li>
|
|
<li><a href="pie_charts.html">Pie</a></li>
|
|
<li><a href="radial_bar.html">Radial bar</a></li>
|
|
<li><a href="radar_chart.html">Radar</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="menu-title"><span>Table & forms </span></li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#table">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#table"></use>
|
|
</svg>
|
|
Table
|
|
</a>
|
|
<ul class="collapse" id="table">
|
|
<li><a href="basic_table.html">BasicTable</a></li>
|
|
<li><a href="data_table.html">Data Table</a></li>
|
|
<li><a href="list_table.html">List Js</a></li>
|
|
<li><a href="advance_table.html">Advance Table</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#forms">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#wallet"></use>
|
|
</svg>
|
|
Forms elements
|
|
</a>
|
|
<ul class="collapse" id="forms">
|
|
<li><a href="form_validation.html">Form Validation</a></li>
|
|
<li><a href="base_inputs.html">Base Input</a></li>
|
|
<li><a href="checkbox_radio.html">Checkbox & Radio</a></li>
|
|
<li><a href="input_groups.html">Input Groups</a></li>
|
|
<li><a href="input_masks.html">Input Masks</a></li>
|
|
<li><a href="floating_labels.html">Floating Labels</a></li>
|
|
<li><a href="date_picker.html">Datetimepicker</a></li>
|
|
<li><a href="touch_spin.html">Touch spin</a></li>
|
|
<li><a href="select.html">Select2</a></li>
|
|
<li><a href="switch.html">Switch</a></li>
|
|
<li><a href="range_slider.html">Range Slider</a></li>
|
|
<li><a href="typeahead.html">Typeahead</a></li>
|
|
<li><a href="textarea.html">Textarea</a></li>
|
|
<li><a href="clipboard.html">Clipboard</a></li>
|
|
<li><a href="file_upload.html">File Upload</a></li>
|
|
<li><a href="dual_list_boxes.html">Dual List Boxes</a></li>
|
|
<li><a href="default_forms.html">Default Forms</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#ready_to_use">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#newspaper"></use>
|
|
</svg>
|
|
Ready to use
|
|
<span class="badge text-bg-success badge-notification ms-2">2</span>
|
|
</a>
|
|
<ul class="collapse" id="ready_to_use">
|
|
<li><a href="form_wizards.html">Form wizards</a></li>
|
|
<li><a href="form_wizard_1.html">Form wizards 1</a></li>
|
|
<li><a href="form_wizard_2.html">Form wizards 2</a></li>
|
|
<li><a href="ready_to_use_form.html">Ready To Use Form</a></li>
|
|
<li><a href="ready_to_use_table.html">Ready To Use Tables</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="menu-title"><span>Pages</span></li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#auth_pages">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#window"></use>
|
|
</svg>
|
|
Auth Pages
|
|
</a>
|
|
<ul class="collapse" id="auth_pages">
|
|
<li><a href="sign_in.html">Sign In</a></li>
|
|
<li><a href="sign_in_1.html">Sign In with Bg-image</a></li>
|
|
<li><a href="sign_up.html">Sign Up</a></li>
|
|
<li><a href="sign_up_1.html">Sign Up with Bg-image</a></li>
|
|
<li><a href="password_reset.html">Password Reset</a></li>
|
|
<li><a href="password_reset_1.html">Password Reset with Bg-image</a></li>
|
|
<li><a href="password_create.html">Password Create</a></li>
|
|
<li><a href="password_create_1.html">Password Create with Bg-image</a></li>
|
|
<li><a href="lock_screen.html">Lock Screen</a></li>
|
|
<li><a href="lock_screen_1.html">Lock Screen with Bg-image</a></li>
|
|
<li><a href="two_step_verification.html">Two-Step Verification</a></li>
|
|
<li><a href="two_step_verification_1.html">Two-Step Verification with Bg-image</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#error_pages">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#exclamation-circle"></use>
|
|
</svg>
|
|
Error Pages
|
|
</a>
|
|
<ul class="collapse" id="error_pages">
|
|
<li><a href="error_400.html">Bad Request </a></li>
|
|
<li><a href="error_403.html">Forbidden </a></li>
|
|
<li><a href="error_404.html">Not Found</a></li>
|
|
<li><a href="error_500.html">Internal Server</a></li>
|
|
<li><a href="error_503.html">Service Unavailable</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#other_pages">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#document"></use>
|
|
</svg>
|
|
Other Pages
|
|
</a>
|
|
<ul class="collapse" id="other_pages">
|
|
<li><a href="blank.html">Blank</a></li>
|
|
<li><a href="maintenance.html">Maintenance</a></li>
|
|
<li><a href="landing.html">Landing Page</a></li>
|
|
<li><a href="coming_soon.html">Coming Soon</a></li>
|
|
<li><a href="sitemap.html">Sitemap</a></li>
|
|
<li><a href="privacy_policy.html">Privacy Policy</a></li>
|
|
<li><a href="terms_condition.html">Terms & Condition</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="menu-title"><span>Others</span></li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#level">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#arrow-down"></use>
|
|
</svg>
|
|
2 level
|
|
</a>
|
|
<ul class="collapse" id="level">
|
|
<li><a href="dropdown.html#">Blank</a></li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="dropdown.html#level2">
|
|
Another level
|
|
</a>
|
|
<ul class="collapse" id="level2">
|
|
<li><a href="blank.html">Blank</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
<li class="no-sub">
|
|
<a href="https://phpstack-1384472-5121645.cloudwaysapps.com/document/html/ki-admin/index.html">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#document-text"></use>
|
|
</svg>
|
|
Document
|
|
</a>
|
|
</li>
|
|
|
|
<li class="no-sub">
|
|
<a href="mailto:teqlathemes@gmail.com">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#chat-bubble"></use>
|
|
</svg>
|
|
Support
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="menu-navs">
|
|
<span class="menu-previous"><i class="ti ti-chevron-left"></i></span>
|
|
<span class="menu-next"><i class="ti ti-chevron-right"></i></span>
|
|
</div>
|
|
|
|
</nav>
|
|
<!-- Menu Navigation ends -->
|
|
|
|
<div class="app-content">
|
|
<div class="">
|
|
<!-- Header Section starts -->
|
|
<header class="header-main">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-8 col-sm-6 d-flex align-items-center header-left p-0">
|
|
<span class="header-toggle ">
|
|
<i class="ph ph-squares-four"></i>
|
|
</span>
|
|
|
|
<div class="header-searchbar w-100">
|
|
<form action="dropdown.html#" class="mx-sm-3 app-form app-icon-form ">
|
|
<div class="position-relative">
|
|
<input aria-label="Search" class="form-control" placeholder="Search..."
|
|
type="search">
|
|
<i class="ti ti-search text-dark"></i>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4 col-sm-6 d-flex align-items-center justify-content-end header-right p-0">
|
|
|
|
<ul class="d-flex align-items-center">
|
|
|
|
<li class="header-language">
|
|
<div class="flex-shrink-0 dropdown" id="lang_selector">
|
|
<a aria-expanded="false" class="d-block head-icon ps-0"
|
|
data-bs-toggle="dropdown"
|
|
href="dropdown.html#">
|
|
<div class="lang-flag lang-en ">
|
|
<span class="flag rounded-circle overflow-hidden">
|
|
<i class=""></i>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<ul class="dropdown-menu language-dropdown header-card border-0">
|
|
<li class="lang lang-en selected dropdown-item p-2" data-bs-placement="top"
|
|
data-bs-toggle="tooltip" title="US">
|
|
<span class="d-flex align-items-center">
|
|
<i class="flag-icon flag-icon-usa flag-icon-squared rounded-circle f-s-20"></i>
|
|
<span class="ps-2">US</span>
|
|
</span>
|
|
</li>
|
|
<li class="lang lang-pt dropdown-item p-2" title="FR">
|
|
<span class="d-flex align-items-center">
|
|
<i class="flag-icon flag-icon-fra flag-icon-squared rounded-circle f-s-20"></i>
|
|
<span class="ps-2">France</span>
|
|
</span>
|
|
</li>
|
|
<li class="lang lang-es dropdown-item p-2" title="UK">
|
|
<span class="d-flex align-items-center">
|
|
<i class="flag-icon flag-icon-gbr flag-icon-squared rounded-circle f-s-20"></i>
|
|
<span class="ps-2">UK</span>
|
|
</span>
|
|
</li>
|
|
<li class="lang lang-es dropdown-item p-2" title="IT">
|
|
<span class="d-flex align-items-center">
|
|
<i class="flag-icon flag-icon-ita flag-icon-squared rounded-circle f-s-20"></i>
|
|
<span class="ps-2">Italy</span>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="header-apps">
|
|
<a aria-controls="appscanvasRights"
|
|
class="d-block head-icon bg-light-dark rounded-circle f-s-22 p-2"
|
|
data-bs-target="#appscanvasRights" data-bs-toggle="offcanvas"
|
|
href="dropdown.html#" role="button">
|
|
<i class="ph ph-bounding-box"></i>
|
|
|
|
</a>
|
|
|
|
<div aria-labelledby="appscanvasRightsLabel"
|
|
class="offcanvas offcanvas-end header-apps-canvas"
|
|
id="appscanvasRights"
|
|
tabindex="-1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="appscanvasRightsLabel">Shortcut</h5>
|
|
<div class="app-dropdown flex-shrink-0">
|
|
<a aria-expanded="false" class=" p-1" data-bs-auto-close="outside"
|
|
data-bs-toggle="dropdown"
|
|
href="dropdown.html#"
|
|
role="button">
|
|
<i class="ph-bold ph-faders-horizontal f-s-20"></i>
|
|
|
|
|
|
</a>
|
|
<ul class="dropdown-menu mb-3">
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
Privacy Settings
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
Account Settings
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
Accessibility
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item border-0">
|
|
<a aria-expanded="false" data-bs-toggle="dropdown" href="dropdown.html#"
|
|
role="button">
|
|
More Settings
|
|
</a>
|
|
<ul class="dropdown-menu sub-menu">
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
Backup and Restore
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
<span>Data Usage</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
<span>Theme</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item d-flex align-items-center justify-content-between">
|
|
<a href="dropdown.html#">
|
|
<p class="mb-0">Notification</p>
|
|
</a>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input form-check-primary"
|
|
id="notificationSwitch"
|
|
type="checkbox">
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="offcanvas-body app-scroll">
|
|
<div class="row row-cols-3 g-2">
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
|
|
href="product.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-shopping-bag-open f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">E-shop</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
|
|
href="email.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-envelope f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Email</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
|
|
href="chat.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-chat-circle-text f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Chat</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
|
|
href="project_app.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-projector-screen-chart f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Project</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-info w-100 rounded-3 py-3 px-2 "
|
|
href="invoice.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-scroll f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Invoice</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-dark w-100 rounded-3 py-3 px-2 "
|
|
href="blog.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-notebook f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Blog</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
|
|
href="calendar.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-calendar f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Calender</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
|
|
href="file_manager.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-folder-open f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark txt-ellipsis-1">File
|
|
Manager</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
|
|
href="gallery.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-google-photos-logo f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Gallery</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
|
|
href="profile.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-users-three f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Profile</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-secondary w-100 rounded-3 py-3 px-2 "
|
|
href="kanban_board.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-selection-foreground f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Task Board</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="d-flex-center text-light-secondary w-100 h-100 rounded-3 p-2 dashed-1-secondary"
|
|
href="kanban_board.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-plus f-s-30"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="header-cart">
|
|
<a aria-controls="cartcanvasRight"
|
|
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
|
|
data-bs-target="#cartcanvasRight"
|
|
data-bs-toggle="offcanvas"
|
|
href="dropdown.html#" role="button">
|
|
<i class="ph ph-shopping-cart-simple"></i>
|
|
<span
|
|
class="position-absolute translate-middle badge rounded-pill bg-danger badge-notification">4</span>
|
|
</a>
|
|
<div aria-labelledby="cartcanvasRightLabel"
|
|
class="offcanvas offcanvas-end header-cart-canvas"
|
|
id="cartcanvasRight"
|
|
tabindex="-1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="cartcanvasRightLabel">Cart</h5>
|
|
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
|
|
type="button"></button>
|
|
</div>
|
|
<div class="offcanvas-body app-scroll p-0">
|
|
<div class="head-container">
|
|
<div class="head-box">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/01.png">
|
|
</span>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank"> Backpacks (3<i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)
|
|
</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : M</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :Pink</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$600.50 x 1</p>
|
|
</div>
|
|
</div>
|
|
<div class="head-box">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/05.png">
|
|
</span>
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank"> Women's Watch (4<i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : S</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :Rose Gold</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$519.10 x 2</p>
|
|
</div>
|
|
</div>
|
|
<div class="head-box">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/04.png">
|
|
</span>
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank">Sandals (5 <i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : 8</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :White</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$390 x 2</p>
|
|
</div>
|
|
</div>
|
|
<div class="head-box ">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/03.png">
|
|
</span>
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank"> Jackets (3<i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : XL</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :Blue</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$300.00 x 2</p>
|
|
</div>
|
|
</div>
|
|
<div class="head-box ">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/02.png">
|
|
</span>
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank"> Shoes (3<i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : 9</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :White</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$450.00 x 1</p>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-massage py-4 px-3">
|
|
|
|
<div>
|
|
<i class="ph-duotone ph-shopping-bag-open f-s-50 text-primary"></i>
|
|
<h6 class="mb-0">Your Cart is Empty</h6>
|
|
<p class="text-secondary mb-0">Add some items :)</p>
|
|
<a class="btn btn-light-primary btn-xs mt-2"
|
|
href="product_details.html">Shop
|
|
Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="offcanvas-footer">
|
|
<div class="head-box-footer p-3">
|
|
<div class="mb-4">
|
|
<h6 class="text-muted f-w-600">Total <span
|
|
class="float-end text-primary">$3,468.00</span></h6>
|
|
</div>
|
|
<div class="header-cart-btn">
|
|
<a class="btn btn-primary" href="cart.html" role="button"
|
|
target="_blank">
|
|
<i class="ti ti-eye"></i> View Cart</a>
|
|
<a class="btn btn-success" href="checkout.html" role="button"
|
|
target="_blank">
|
|
Checkout <i class="ti ti-shopping-cart"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="header-dark">
|
|
<div class="sun-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
|
|
<i class="ph ph-moon-stars"></i>
|
|
</div>
|
|
<div class="moon-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
|
|
<i class="ph ph-sun-dim"></i>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="header-notification">
|
|
<a aria-controls="notificationcanvasRight"
|
|
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
|
|
data-bs-target="#notificationcanvasRight"
|
|
data-bs-toggle="offcanvas"
|
|
href="dropdown.html#"
|
|
role="button">
|
|
<i class="ph ph-bell"></i>
|
|
<span
|
|
class="position-absolute translate-middle p-1 bg-primary border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower"></span>
|
|
</a>
|
|
<div aria-labelledby="notificationcanvasRightLabel"
|
|
class="offcanvas offcanvas-end header-notification-canvas"
|
|
id="notificationcanvasRight" tabindex="-1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="notificationcanvasRightLabel">
|
|
Notification</h5>
|
|
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
|
|
type="button"></button>
|
|
</div>
|
|
<div class="offcanvas-body app-scroll p-0">
|
|
<div class="head-container">
|
|
<div class="notification-message head-box">
|
|
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
|
|
<a class="f-s-15 text-dark mb-0"
|
|
href="read_email.html"><span
|
|
class="f-w-500 text-dark">Gene Hart</span> wants to
|
|
edit <span
|
|
class="f-w-500 text-dark">Report.doc</span></a>
|
|
<div>
|
|
<a class="d-inline-block f-w-500 text-success me-1"
|
|
href="dropdown.html#">Approve</a>
|
|
<a class="d-inline-block f-w-500 text-danger"
|
|
href="dropdown.html#">Deny</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> sep 23 </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notification-message head-box">
|
|
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
<a class="f-s-15 text-dark mb-0" href="read_email.html">Hey
|
|
<span
|
|
class="f-w-500 text-dark">Emery McKenzie</span>,
|
|
get ready: Your order from <span
|
|
class="f-w-500 text-dark">@Shopper.com</span></a>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> sep 23 </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notification-message head-box">
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
<a class="f-s-15 text-dark mb-0"
|
|
href="read_email.html"><span
|
|
class="f-w-500 text-dark">Simon Young</span> shared
|
|
a file called <span
|
|
class="f-w-500 text-dark">Dropdown.pdf</span></a>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> 30 min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notification-message head-box">
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
<a class="f-s-15 text-dark mb-0"
|
|
href="read_email.html"><span
|
|
class="f-w-500 text-dark">Becky G. Hayes</span> has
|
|
added a comment to <span
|
|
class="f-w-500 text-dark">Final_Report.pdf</span></a>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> 45 min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notification-message head-box">
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
<a class="f-s-15 text-dark mb-0 "
|
|
href="read_email.html"><span
|
|
class="f-w-600 text-dark">@Romaine</span>
|
|
invited you to a meeting
|
|
</a>
|
|
<div>
|
|
<a class="d-inline-block f-w-500 text-success me-1"
|
|
href="dropdown.html#">Join</a>
|
|
<a class="d-inline-block f-w-500 text-danger" href="dropdown.html#">Decline</a>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> 1 hour ago </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden-massage py-4 px-3">
|
|
<div>
|
|
<i class="ph-duotone ph-bell-ringing f-s-50 text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">Notification Not Found</h6>
|
|
<p class="text-dark">When you have any notifications added
|
|
here,will
|
|
appear here.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Header Section ends -->
|
|
|
|
<!-- Body main section starts -->
|
|
<main>
|
|
<div class="container-fluid">
|
|
|
|
<!-- Breadcrumb start -->
|
|
<div class="row m-1">
|
|
<div class="col-12 ">
|
|
<h4 class="main-title">Dropdown</h4>
|
|
<ul class="app-line-breadcrumbs mb-3">
|
|
<li class="">
|
|
<a class="f-s-14 f-w-500" href="dropdown.html#">
|
|
<span>
|
|
<i class="ph-duotone ph-briefcase f-s-16"></i> Ui kits
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="active">
|
|
<a class="f-s-14 f-w-500" href="dropdown.html#">Dropdown</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Breadcrumb end -->
|
|
|
|
<!-- Dropdown start -->
|
|
<div class="row">
|
|
<!-- Single Button and Link Dropdown start -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5 class="txt-ellipsis">Single Button and Link Dropdown</h5>
|
|
<a aria-controls="dropdown1" aria-expanded="false" data-bs-toggle="collapse"
|
|
href="dropdown.html#dropdown1">
|
|
<i class="ti ti-code source" data-source="dropdown"></i></a>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div class="dropdown">
|
|
<button aria-expanded="false" class="btn btn-primary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dropdown button
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="dropdown">
|
|
<a aria-expanded="false" class="btn btn-secondary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
href="dropdown.html#"
|
|
role="button">
|
|
Dropdown link
|
|
</a>
|
|
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="dropdown collapse mt-3" id="dropdown1">
|
|
<code class="language-html">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>Single Button and Link Dropdown</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div class="dropdown">
|
|
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dropdown button
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="dropdown">
|
|
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dropdown link
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<!-- Single Button and Link Dropdown end -->
|
|
|
|
|
|
|
|
<!-- dropdown 3 -->
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5 class="txt-ellipsis">Menu Content Dropdown</h5>
|
|
<a aria-controls="dropdown3" aria-expanded="false" data-bs-toggle="collapse"
|
|
href="dropdown.html#dropdown3">
|
|
<i class="ti ti-code source" data-source="drop3"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" aria-haspopup="true"
|
|
class="btn btn-success dropdown-toggle"
|
|
data-bs-toggle="dropdown" type="button">
|
|
Header <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-header noti-title">
|
|
<h5 class="text-muted text-truncate mn-0">Welcome Jessie!</h5>
|
|
</div>
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="dropdown.html#">Action</a>
|
|
<a class="dropdown-item" href="dropdown.html#">Another action</a>
|
|
<a class="dropdown-item" href="dropdown.html#">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="dropdown.html#">Separated link</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" aria-haspopup="true"
|
|
class="btn btn-danger dropdown-toggle"
|
|
data-bs-toggle="dropdown" type="button">
|
|
Text <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-md p-3">
|
|
<p>
|
|
Some example text that's free-flowing within the dropdown menu.
|
|
</p>
|
|
<p class="mb-0">
|
|
And this is more example text.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" aria-haspopup="true"
|
|
class="btn btn-warning dropdown-toggle"
|
|
data-bs-toggle="dropdown" type="button">
|
|
Forms <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-md form-dropdown p-4">
|
|
<form>
|
|
<div class="mb-2">
|
|
<label class="form-label" for="exampleDropdownFormEmail">Email
|
|
address</label>
|
|
<input class="form-control" id="exampleDropdownFormEmail"
|
|
placeholder="email@example.com"
|
|
type="email">
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label" for="exampleDropdownFormPassword">Password</label>
|
|
<input class="form-control" id="exampleDropdownFormPassword"
|
|
placeholder="Password"
|
|
type="password">
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" id="rememberdropdownCheck"
|
|
type="checkbox">
|
|
<label class="form-check-label" for="rememberdropdownCheck">Remember
|
|
me</label>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary" type="submit">Sign in</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="drop3 collapse mt-3" id="dropdown3">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Menu Content Dropdown</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
Header <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-header noti-title">
|
|
<h5 class="text-muted text-truncate mn-0">Welcome Jessie!</h5>
|
|
</div>
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
Text <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-md p-3">
|
|
<p>
|
|
Some example text that's free-flowing within the dropdown menu.
|
|
</p>
|
|
<p class="mb-0">
|
|
And this is more example text.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
Forms <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-md form-dropdown p-4">
|
|
<form>
|
|
<div class="mb-2">
|
|
<label class="form-label" for="exampleDropdownFormEmail">Email address</label>
|
|
<input type="email" class="form-control" id="exampleDropdownFormEmail"
|
|
placeholder="email@example.com">
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label" for="exampleDropdownFormPassword">Password</label>
|
|
<input type="password" class="form-control" id="exampleDropdownFormPassword"
|
|
placeholder="Password">
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="form-check custom-checkbox">
|
|
<input type="checkbox" class="form-check-input" id="rememberdropdownCheck">
|
|
<label class="form-check-label" for="rememberdropdownCheck">Remember me</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 4 -->
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5 class="txt-ellipsis">Dropdown Color Variant</h5>
|
|
<a aria-controls="dropdown4" aria-expanded="false" data-bs-toggle="collapse"
|
|
href="dropdown.html#dropdown4">
|
|
<i class="ti ti-code source" data-source="drop4"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-primary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Primary
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-secondary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Secondary
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-success dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Success
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-danger dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Danger
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-warning dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Warning
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-info dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Info
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-light dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Light
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-dark dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dark
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<pre class="drop4 collapse mt-3" id="dropdown4">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Dropdown Color Variant</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Primary
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Secondary
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Success
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Danger
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Warning
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Info
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Light
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dark
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 5 -->
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>Sizing Dropdown</h5>
|
|
<a aria-controls="dropdown5" aria-expanded="false" data-bs-toggle="collapse"
|
|
href="dropdown.html#dropdown5">
|
|
<i class="ti ti-code source" data-source="drop5"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-3">
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-primary btn-lg dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Large button
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-secondary btn-lg" type="button">Large split button
|
|
</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-secondary opacity-75 btn-lg dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-success btn-sm dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Small button
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-danger btn-sm" type="button"> Small split button
|
|
</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-danger opacity-75 btn-sm dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="drop5 collapse mt-3" id="dropdown5">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Sizing Dropdown</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-3">
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Large button
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-secondary btn-lg">Large split button</button>
|
|
<button type="button"
|
|
class="btn btn-secondary opacity-75 btn-lg dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Small button
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-danger btn-sm"> Small split button</button>
|
|
<button type="button"
|
|
class="btn btn-danger opacity-75 btn-sm dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5 class="txt-ellipsis">Dropdown Outline Variant</h5>
|
|
<a aria-controls="dropdown6" aria-expanded="false"
|
|
data-bs-toggle="collapse" href="dropdown.html#dropdown6">
|
|
<i class="ti ti-code source" data-source="drop6"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-primary" type="button">Primary</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Primary</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-secondary" type="button">Secondary</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Secondary</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-success" type="button">Success</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-outline-success dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Success</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-danger" type="button">Danger</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Danger</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-warning" type="button">Warning</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Warning</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-info" type="button">Info</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-outline-info dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Info</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-light" type="button">Light</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-outline-light dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Light</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-dark" type="button">Dark</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Dark</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<pre class="drop6 collapse mt-3" id="dropdown6">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Dropdown Outline Variant</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-primary">Primary</button>
|
|
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Primary</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
|
<button type="button"
|
|
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Secondary</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-success">Success</button>
|
|
<button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Success</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-danger">Danger</button>
|
|
<button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Danger</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
|
<button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Warning</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-info">Info</button>
|
|
<button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Info</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-light">Light</button>
|
|
<button type="button" class="btn btn-outline-light dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Light</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-dark">Dark</button>
|
|
<button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Dark</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 7 -->
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>Alignment Options</h5>
|
|
<a aria-controls="dropdown7" aria-expanded="false"
|
|
data-bs-toggle="collapse" href="dropdown.html#dropdown7">
|
|
<i class="ti ti-code source" data-source="drop7"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2 alignment-dropdown">
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-outline-primary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dropdown <i class="ti ti-arrow-big-down-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-outline-secondary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Right-aligned menu <i class="ti ti-arrow-big-down-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-outline-success dropdown-toggle"
|
|
data-bs-display="static"
|
|
data-bs-toggle="dropdown" type="button"> right-aligned lg <i
|
|
class="ti ti-arrow-big-down-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-lg-end">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-outline-danger dropdown-toggle"
|
|
data-bs-display="static"
|
|
data-bs-toggle="dropdown" type="button"> left-aligned lg <i
|
|
class="ti ti-arrow-big-down-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group dropstart">
|
|
<button aria-expanded="false" class="btn btn-outline-warning dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
<i class="ti ti-arrow-big-left-line"></i> Dropstart
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group dropend">
|
|
<button aria-expanded="false" class="btn btn-outline-info dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dropend <i class="ti ti-arrow-big-right-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group dropup">
|
|
<button aria-expanded="false" class="btn btn-outline-dark dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dropup <i class="ti ti-arrow-big-up-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="drop7 collapse mt-3" id="dropdown7">
|
|
<code class="language-html">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Alignment Options</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2 alignment-dropdown">
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dropdown <i class="ti ti-arrow-big-down-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Right-aligned menu <i class="ti ti-arrow-big-down-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown"
|
|
data-bs-display="static" aria-expanded="false"> right-aligned lg <i
|
|
class="ti ti-arrow-big-down-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-lg-end">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown"
|
|
data-bs-display="static" aria-expanded="false"> left-aligned lg <i
|
|
class="ti ti-arrow-big-down-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group dropstart">
|
|
<button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
<i class="ti ti-arrow-big-left-line"></i> Dropstart
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group dropend">
|
|
<button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dropend <i class="ti ti-arrow-big-right-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group dropup">
|
|
<button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dropup <i class="ti ti-arrow-big-up-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 8 -->
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>Dropdown Light Variant</h5>
|
|
<a aria-controls="dropdown8" aria-expanded="false"
|
|
data-bs-toggle="collapse" href="dropdown.html#dropdown8">
|
|
<i class="ti ti-code source" data-source="drop8"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-primary " type="button">Primary</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-primary dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-secondary" type="button">Secondary</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-success" type="button">Success</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-success dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-danger" type="button">Danger</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-danger dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-warning" type="button">Warning</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-warning dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-info" type="button">Info</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-info dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-light" type="button">Light</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-light dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-dark" type="button">Dark</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-dark dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<pre class="drop8 collapse mt-3" id="dropdown8">
|
|
<code class="language-html">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Dropdown Light Variant</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-primary ">Primary </button>
|
|
<button type="button" class="btn btn-light-primary dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-success">Success</button>
|
|
<button type="button" class="btn btn-light-success dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-danger">Danger</button>
|
|
<button type="button" class="btn btn-light-danger dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-warning">Warning</button>
|
|
<button type="button" class="btn btn-light-warning dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-info">Info</button>
|
|
<button type="button" class="btn btn-light-info dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-light">Light</button>
|
|
<button type="button" class="btn btn-light-light dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-dark">Dark</button>
|
|
<button type="button" class="btn btn-light-dark dropdown-toggle dropdown-toggle-split p-2"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-badge-down f-s-16"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 9 -->
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>Dropup Variation</h5>
|
|
<a aria-controls="dropdown9" aria-expanded="false"
|
|
data-bs-toggle="collapse" href="dropdown.html#dropdown9">
|
|
<i class="ti ti-code source" data-source="drop9"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div class="btn-group dropup dropdown-light btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-light-primary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dropup <i class="ti ti-arrow-narrow-up"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropup dropdown-light btn-rtl">
|
|
<button class="btn btn-light-secondary" type="button">
|
|
Split dropup
|
|
</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown </span>
|
|
<i class="ti ti-arrow-narrow-up"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropend dropdown-light">
|
|
<button aria-expanded="false" class="btn btn-light-success dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dropend <i class="ti ti-arrow-narrow-right"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropend dropdown-light btn-rtl">
|
|
<button class="btn btn-light-danger" type="button">
|
|
Split dropend
|
|
</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-danger dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropend </span>
|
|
<i class="ti ti-arrow-narrow-right"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropstart dropdown-light">
|
|
<button aria-expanded="false" class="btn btn-light-warning dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
<i class="ti ti-arrow-narrow-left"></i> Dropstart
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropstart dropdown-light btn-rtl">
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-info dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropstart</span>
|
|
<i class="ti ti-arrow-narrow-left"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
<button class="btn btn-light-info" type="button">
|
|
Split dropstart
|
|
</button>
|
|
</div>
|
|
<div class="dropdown dropdown-light">
|
|
<button aria-expanded="false" class="btn btn-light-light dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dropup <i class="ti ti-arrow-narrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<button class="dropdown-item" type="button">Action</button>
|
|
</li>
|
|
<li>
|
|
<button class="dropdown-item" type="button">Another action</button>
|
|
</li>
|
|
<li>
|
|
<button class="dropdown-item" type="button">Something else here</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-light-dark" type="button">Dropup</button>
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-dark dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-narrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="drop9 collapse mt-3" id="dropdown9">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Dropup Variation</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div class="btn-group dropup dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-primary dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dropup <i class="ti ti-arrow-narrow-up"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropup dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-secondary">
|
|
Split dropup
|
|
</button>
|
|
<button type="button" class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown </span>
|
|
<i class="ti ti-arrow-narrow-up"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropend dropdown-light">
|
|
<button type="button" class="btn btn-light-success dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dropend <i class="ti ti-arrow-narrow-right"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropend dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-danger">
|
|
Split dropend
|
|
</button>
|
|
<button type="button" class="btn btn-light-danger dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropend </span>
|
|
<i class="ti ti-arrow-narrow-right"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropstart dropdown-light">
|
|
<button type="button" class="btn btn-light-warning dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
<i class="ti ti-arrow-narrow-left"></i> Dropstart
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropstart dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-info dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropstart</span>
|
|
<i class="ti ti-arrow-narrow-left"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
<button type="button" class="btn btn-light-info">
|
|
Split dropstart
|
|
</button>
|
|
</div>
|
|
<div class="dropdown dropdown-light">
|
|
<button class="btn btn-light-light dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Dropup <i class="ti ti-arrow-narrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><button class="dropdown-item" type="button">Action</button></li>
|
|
<li><button class="dropdown-item" type="button">Another action</button></li>
|
|
<li><button class="dropdown-item" type="button">Something else here</button></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button type="button" class="btn btn-light-dark">Dropup</button>
|
|
<button type="button" class="btn btn-light-dark dropdown-toggle dropdown-toggle-split"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
<i class="ti ti-arrow-narrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 10 -->
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>Auto close behaviour</h5>
|
|
<a aria-controls="dropdown10" aria-expanded="false"
|
|
data-bs-toggle="collapse" href="dropdown.html#dropdown10">
|
|
<i class="ti ti-code source" data-source="drop10"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-primary dropdown-toggle"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
Default dropdown <i class="ti ti-circle-arrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-secondary dropdown-toggle"
|
|
data-bs-auto-close="inside"
|
|
data-bs-toggle="dropdown" type="button">
|
|
Clickable outside <i class="ti ti-circle-arrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-success dropdown-toggle"
|
|
data-bs-auto-close="outside"
|
|
data-bs-toggle="dropdown" type="button">
|
|
Clickable inside <i class="ti ti-circle-arrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button aria-expanded="false" class="btn btn-danger dropdown-toggle"
|
|
data-bs-auto-close="false"
|
|
data-bs-toggle="dropdown" type="button">
|
|
Manual close <i class="ti ti-circle-arrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="dropdown.html#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="drop10 collapse mt-3" id="dropdown10">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Auto close behavior</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
Default dropdown <i class="ti ti-circle-arrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="inside" aria-expanded="false">
|
|
Clickable outside <i class="ti ti-circle-arrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="outside" aria-expanded="false">
|
|
Clickable inside <i class="ti ti-circle-arrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group dropdown-light btn-rtl">
|
|
<button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="false" aria-expanded="false">
|
|
Manual close <i class="ti ti-circle-arrow-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 11 -->
|
|
|
|
<div class="col-12">
|
|
<div class="row">
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>With Icon Dropdown</h5>
|
|
<a aria-controls="dropdown12" aria-expanded="false"
|
|
data-bs-toggle="collapse" href="dropdown.html#dropdown12">
|
|
<i class="ti ti-code source" data-source="drop12"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="btn-group btn-rtl">
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-secondary dropdown-toggle"
|
|
data-bs-auto-close="true" data-bs-toggle="dropdown"
|
|
type="button">
|
|
<i class="ti ti-arrow-bar-down"></i> Default dropdown
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#"><i
|
|
class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#"><i
|
|
class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#"><i
|
|
class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="drop12 collapse mt-3" id="dropdown12">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>With Icon Dropdown</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="btn-group btn-rtl">
|
|
<button class="btn btn-light-secondary dropdown-toggle" type="button"
|
|
data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-arrow-bar-down"></i> Default dropdown
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 12 -->
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>Hover Dropdown </h5>
|
|
<a aria-controls="dropdown11" aria-expanded="false"
|
|
data-bs-toggle="collapse" href="dropdown.html#dropdown11">
|
|
<i class="ti ti-code source" data-source="drop11"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="btn-group hover-dropdown">
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-primary dropdown-toggle waves-effect waves-light"
|
|
data-bs-toggle="dropdown" data-trigger="hover"
|
|
type="button">Hover
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item">Action</a></li>
|
|
<li><a class="dropdown-item">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="drop11 collapse mt-3" id="dropdown11">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Hover Dropdown </h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="btn-group hover-dropdown">
|
|
<button type="button" class="btn btn-light-primary dropdown-toggle waves-effect waves-light"
|
|
data-bs-toggle="dropdown" data-trigger="hover" aria-expanded="false">Hover</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item">Action</a></li>
|
|
<li><a class="dropdown-item">Another action</a></li>
|
|
<li><a class="dropdown-item">Something else here</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- dropdown 13 -->
|
|
|
|
<div class="col-md-2">
|
|
<div class="card">
|
|
<div class="card-header code-header">
|
|
<h5>Icon</h5>
|
|
<a aria-controls="dropdown13" aria-expanded="false"
|
|
data-bs-toggle="collapse" href="dropdown.html#dropdown13">
|
|
<i class="ti ti-code source" data-source="drop13"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="btn-group dropdown-icon-none">
|
|
<button aria-expanded="false"
|
|
class="btn btn-light-success icon-btn b-r-4 dropdown-toggle"
|
|
data-bs-auto-close="true" data-bs-toggle="dropdown"
|
|
type="button">
|
|
<i class="ti ti-capture"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dropdown.html#"><i
|
|
class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#"><i
|
|
class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="dropdown.html#"><i
|
|
class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="drop13 collapse mt-3" id="dropdown13">
|
|
<code class="language-html">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Icon</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="btn-group dropdown-icon-none">
|
|
<button class="btn btn-light-success icon-btn b-r-4 dropdown-toggle" type="button"
|
|
data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-capture"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Custom Dropdown Menu</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 col-lg-4 mb-3">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn btn-lg border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu show">
|
|
<li class="dropdown-item">
|
|
<a class="" href="dropdown.html#">
|
|
<i class="ti ti-user-plus pe-2"></i>
|
|
<span> Action</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a class="" href="dropdown.html#">
|
|
<i class="ti ti-circles-relation pe-2"></i>
|
|
<span>Another action</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a class="" href="dropdown.html#">
|
|
<i class="ti ti-message-circle pe-2"></i>
|
|
<span>Something else here</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item">
|
|
<a class="" href="dropdown.html#">
|
|
<i class="ti ti-settings pe-2"></i>
|
|
Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 mb-3">
|
|
<div class="app-dropdown show">
|
|
<button aria-expanded="false" class="btn btn-lg border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu show">
|
|
<li class="d-flex align-items-center justify-content-between my-1">
|
|
<div class="p-2">
|
|
<div class="bg-secondary h-35 w-35 d-flex-center b-r-50 position-relative">
|
|
<img alt="" class="img-fluid b-r-50"
|
|
src="https://phpstack-1384472-5121645.cloudwaysapps.com/template/html/ki-admin/assets/images/avatar/1.png">
|
|
<span
|
|
class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Brian Baker</h6>
|
|
<p class="text-muted">Manager</p>
|
|
</div>
|
|
|
|
<div>
|
|
<i class="ti ti-settings text-muted fs-4 p-2"></i>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
<i class="ti ti-user-plus pe-2"></i>
|
|
<span> Action</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
<i class="ti ti-circles-relation pe-2"></i>
|
|
<span>Another action</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
<i class="ti ti-message-circle pe-2"></i>
|
|
<span>Something else here</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 mb-3">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn btn-lg border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu show">
|
|
<li class="dropdown-item">
|
|
<a class="ms-2" href="dropdown.html#">
|
|
Action
|
|
</a>
|
|
<i class="ti ti-user-plus ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a class="ms-2" href="dropdown.html#">
|
|
Another action
|
|
</a>
|
|
<i class="ti ti-circles-relation ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a class="ms-2" href="dropdown.html#">
|
|
Something else here
|
|
</a>
|
|
<i class="ti ti-message-circle ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item">
|
|
<a class="ms-2" href="dropdown.html#">
|
|
Settings
|
|
</a>
|
|
<i class="ti ti-settings ms-auto"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 mb-3">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn btn-lg border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu show">
|
|
<li class="d-flex align-items-center justify-content-between my-1">
|
|
|
|
<div class="p-2">
|
|
<div class="bg-secondary h-35 w-35 d-flex-center b-r-50 position-relative">
|
|
<img alt="" class="img-fluid b-r-50"
|
|
src="https://phpstack-1384472-5121645.cloudwaysapps.com/template/html/ki-admin/assets/images/avatar/1.png">
|
|
<span
|
|
class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Brian Baker</h6>
|
|
<p class="text-muted">Manager</p>
|
|
</div>
|
|
|
|
<div>
|
|
<i class="ti ti-settings text-muted fs-4 p-2"></i>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
Action
|
|
</a>
|
|
<i class="ti ti-user-plus ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
Another action
|
|
</a>
|
|
<i class="ti ti-circles-relation ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
Something else here
|
|
</a>
|
|
<i class="ti ti-message-circle ms-auto"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn btn-lg border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu show mb-3">
|
|
<li class="dropdown-item">
|
|
<input class="form-check-input me-2" type="checkbox">
|
|
<a class="me-2" href="dropdown.html#">
|
|
<span> Action</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<input class="form-check-input me-2" type="checkbox">
|
|
<a class="me-2" href="dropdown.html#">
|
|
<span>Another action</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<input class="form-check-input me-2" type="checkbox">
|
|
<a class="me-2" href="dropdown.html#">
|
|
<span>Something else here</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item form-check">
|
|
<input class="form-check-input ms-0" id="flexRadioDefault1"
|
|
name="flexRadioDefault" type="radio">
|
|
<a class="ms-2" href="dropdown.html#">
|
|
Default radio
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn btn-lg border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu show mb-3">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<a href="dropdown.html#">
|
|
Action
|
|
</a>
|
|
<span class="badge text-light-primary">message</span>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<a href="dropdown.html#">
|
|
Another action
|
|
</a>
|
|
<span class="badge text-light-secondary">message</span>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<a href="dropdown.html#">
|
|
Something else
|
|
</a>
|
|
<span class="badge text-light-success">message</span>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<a href="dropdown.html#">
|
|
Something else here
|
|
</a>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn btn-lg border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu show">
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
Action
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
Another action
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item active">
|
|
<a href="dropdown.html#">
|
|
Something else here
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item">
|
|
<a href="dropdown.html#">
|
|
Something else here
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Color Dropdown Menu</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-primary show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-secondary show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-success show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-danger show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-warning show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-info show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-light show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="app-dropdown">
|
|
<button aria-expanded="false" class="btn border-0 icon-btn"
|
|
data-bs-auto-close="true"
|
|
data-bs-toggle="dropdown" type="button">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-dark show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown end -->
|
|
|
|
</div>
|
|
</main>
|
|
<!-- Body main section ends -->
|
|
|
|
<!-- tap on top -->
|
|
<div class="go-top">
|
|
<span class="progress-value">
|
|
<i class="ti ti-arrow-up"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Footer Section starts-->
|
|
<footer>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-9 col-12">
|
|
<p class="footer-text f-w-600 mb-0">Copyright © 2025 ki-admin. All rights reserved 💖
|
|
V1.0.0</p>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="footer-text text-end">
|
|
<a class="f-w-500 text-primary" href="mailto:teqlathemes@gmail.com"> Need Help <i
|
|
class="ti ti-help"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- Footer Section ends-->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--customizer-->
|
|
<div id="customizer"></div>
|
|
|
|
<!-- latest jquery-->
|
|
<script src="../assets/js/jquery-3.6.3.min.js"></script>
|
|
|
|
<!-- Simple bar js-->
|
|
<script src="../assets/vendor/simplebar/simplebar.js"></script>
|
|
|
|
<!-- Bootstrap js-->
|
|
<script src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- phosphor js -->
|
|
<script src="../assets/vendor/phosphor/phosphor.js"></script>
|
|
|
|
<!--Prism JS-->
|
|
<script src="../assets/vendor/prism/prism.min.js"></script>
|
|
|
|
<!-- App js-->
|
|
<script src="../assets/js/script.js"></script>
|
|
|
|
<!-- Customizer js-->
|
|
<script src="../assets/js/customizer.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |