@charescape/mazer-fork-ost
Version:
Free and Open-source Bootstrap 5 Admin Dashboard Template and Landing Page
1,005 lines (907 loc) • 42.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navs - Mazer Admin Dashboard</title>
<link
rel="shortcut icon"
href="./assets/compiled/svg/favicon.svg"
type="image/x-icon"
/>
<link
rel="shortcut icon"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAiCAYAAADRcLDBAAAEs2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMzIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMzQiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIzMyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzQiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249Ijk2LjAiCiAgIHRpZmY6WVJlc29sdXRpb249Ijk2LjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS4xMC4xIgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTAzLTMxVDEwOjUwOjIzKzAyOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz5V57uAAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz9maORHo1hYKC9hISNGTWwsRn4VFmOUX5uZZ36oeTOv954kW2WrKLHxa8FfwFZZK0WkZClrYoOe87ypmWTO7dzzud97z+nec8ETzaiaWd4NWtYyIiNhZWZ2TvE946WZSjqoj6mmPjE1HKWkfdxR5sSbgFOr9Ll/rXoxYapQVik8oOqGJTwqPL5i6Q5vCzeo6dii8KlwpyEXFL519LjLLw6nXP5y2IhGBsFTJ6ykijhexGra0ITl5bRqmWU1fx/nJTWJ7PSUxBbxJkwijBBGYYwhBgnRQ7/MIQIE6ZIVJfK7f/MnyUmuKrPOKgZLpEhj0SnqslRPSEyKnpCRYdXp/9++msneoFu9JgwVT7b91ga+LfjetO3PQ9v+PgLvI1xkC/m5A+h7F32zoLXug38dzi4LWnwHzjeg8UGPGbFfySvuSSbh9QRqZ6H+Gqrm3Z7l9zm+h+iafNUV7O5Bu5z3L/wAdthn7QIme0YAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJTSURBVFiF7Zi9axRBGIefEw2IdxFBRQsLWUTBaywSK4ubdSGVIY1Y6HZql8ZKCGIqwX/AYLmCgVQKfiDn7jZeEQMWfsSAHAiKqPiB5mIgELWYOW5vzc3O7niHhT/YZvY37/swM/vOzJbIqVq9uQ04CYwCI8AhYAlYAB4Dc7HnrOSJWcoJcBS4ARzQ2F4BZ2LPmTeNuykHwEWgkQGAet9QfiMZjUSt3hwD7psGTWgs9pwH1hC1enMYeA7sKwDxBqjGnvNdZzKZjqmCAKh+U1kmEwi3IEBbIsugnY5avTkEtIAtFhBrQCX2nLVehqyRqFoCAAwBh3WGLAhbgCRIYYinwLolwLqKUwwi9pxV4KUlxKKKUwxC6ZElRCPLYAJxGfhSEOCz6m8HEXvOB2CyIMSk6m8HoXQTmMkJcA2YNTHm3congOvATo3tE3A29pxbpnFzQSiQPcB55IFmFNgFfEQeahaAGZMpsIJIAZWAHcDX2HN+2cT6r39GxmvC9aPNwH5gO1BOPFuBVWAZue0vA9+A12EgjPadnhCuH1WAE8ivYAQ4ohKaagV4gvxi5oG7YSA2vApsCOH60WngKrA3R9IsvQUuhIGY00K4flQG7gHH/mLytB4C42EgfrQb0mV7us8AAMeBS8mGNMR4nwHamtBB7B4QRNdaS0M8GxDEog7iyoAguvJ0QYSBuAOcAt71Kfl7wA8DcTvZ2KtOlJEr+ByyQtqqhTyHTIeB+ONeqi3brh+VgIN0fohUgWGggizZFTplu12yW8iy/YLOGWMpDMTPXnl+Az9vj2HERYqPAAAAAElFTkSuQmCC"
type="image/png"
/>
<link rel="stylesheet" href="./assets/compiled/css/app.css" />
<link rel="stylesheet" href="./assets/compiled/css/app-dark.css" />
</head>
<body>
<script src="assets/static/js/initTheme.js"></script>
<div id="app">
<div id="sidebar">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"
><img
src="./assets/compiled/svg/logo.svg"
alt="Logo"
srcset=""
/></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--system-uicons"
width="20"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 21 21"
>
<g
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2"
opacity=".3"
></path>
<g transform="translate(-210 -1)">
<path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
<circle cx="220.5" cy="11.5" r="4"></circle>
<path
d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"
></path>
</g>
</g>
</svg>
<div class="form-check form-switch fs-6">
<input
class="form-check-input me-0"
type="checkbox"
id="toggle-dark"
style="cursor: pointer"
/>
<label class="form-check-label"></label>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="20"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"
></path>
</svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"
><i class="bi bi-x bi-middle"></i
></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li class="sidebar-item">
<a href="index.html" class="sidebar-link">
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item active has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item">
<a href="component-accordion.html" class="submenu-link"
>Accordion</a
>
</li>
<li class="submenu-item">
<a href="component-alert.html" class="submenu-link"
>Alert</a
>
</li>
<li class="submenu-item">
<a href="component-badge.html" class="submenu-link"
>Badge</a
>
</li>
<li class="submenu-item">
<a href="component-breadcrumb.html" class="submenu-link"
>Breadcrumb</a
>
</li>
<li class="submenu-item">
<a href="component-button.html" class="submenu-link"
>Button</a
>
</li>
<li class="submenu-item">
<a href="component-card.html" class="submenu-link">Card</a>
</li>
<li class="submenu-item">
<a href="component-carousel.html" class="submenu-link"
>Carousel</a
>
</li>
<li class="submenu-item">
<a href="component-collapse.html" class="submenu-link"
>Collapse</a
>
</li>
<li class="submenu-item">
<a href="component-dropdown.html" class="submenu-link"
>Dropdown</a
>
</li>
<li class="submenu-item">
<a href="component-list-group.html" class="submenu-link"
>List Group</a
>
</li>
<li class="submenu-item">
<a href="component-modal.html" class="submenu-link"
>Modal</a
>
</li>
<li class="submenu-item active">
<a href="component-navs.html" class="submenu-link">Navs</a>
</li>
<li class="submenu-item">
<a href="component-pagination.html" class="submenu-link"
>Pagination</a
>
</li>
<li class="submenu-item">
<a href="component-progress.html" class="submenu-link"
>Progress</a
>
</li>
<li class="submenu-item">
<a href="component-spinner.html" class="submenu-link"
>Spinner</a
>
</li>
<li class="submenu-item">
<a href="component-toasts.html" class="submenu-link"
>Toasts</a
>
</li>
<li class="submenu-item">
<a href="component-tooltip.html" class="submenu-link"
>Tooltip</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="extra-component-avatar.html" class="submenu-link"
>Avatar</a
>
</li>
<li class="submenu-item">
<a href="extra-component-divider.html" class="submenu-link"
>Divider</a
>
</li>
<li class="submenu-item">
<a
href="extra-component-date-picker.html"
class="submenu-link"
>Date Picker</a
>
</li>
<li class="submenu-item">
<a
href="extra-component-sweetalert.html"
class="submenu-link"
>Sweet Alert</a
>
</li>
<li class="submenu-item">
<a href="extra-component-toastify.html" class="submenu-link"
>Toastify</a
>
</li>
<li class="submenu-item">
<a href="extra-component-rating.html" class="submenu-link"
>Rating</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="layout-default.html" class="submenu-link"
>Default Layout</a
>
</li>
<li class="submenu-item">
<a href="layout-vertical-1-column.html" class="submenu-link"
>1 Column</a
>
</li>
<li class="submenu-item">
<a href="layout-vertical-navbar.html" class="submenu-link"
>Vertical Navbar</a
>
</li>
<li class="submenu-item">
<a href="layout-rtl.html" class="submenu-link"
>RTL Layout</a
>
</li>
<li class="submenu-item">
<a href="layout-horizontal.html" class="submenu-link"
>Horizontal Menu</a
>
</li>
</ul>
</li>
<li class="sidebar-title">Forms & Tables</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-element-input.html" class="submenu-link"
>Input</a
>
</li>
<li class="submenu-item">
<a href="form-element-input-group.html" class="submenu-link"
>Input Group</a
>
</li>
<li class="submenu-item">
<a href="form-element-select.html" class="submenu-link"
>Select</a
>
</li>
<li class="submenu-item">
<a href="form-element-radio.html" class="submenu-link"
>Radio</a
>
</li>
<li class="submenu-item">
<a href="form-element-checkbox.html" class="submenu-link"
>Checkbox</a
>
</li>
<li class="submenu-item">
<a href="form-element-textarea.html" class="submenu-link"
>Textarea</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="form-layout.html" class="sidebar-link">
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-journal-check"></i>
<span>Form Validation</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-validation-parsley.html" class="submenu-link"
>Parsley</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-editor-quill.html" class="submenu-link"
>Quill</a
>
</li>
<li class="submenu-item">
<a href="form-editor-ckeditor.html" class="submenu-link"
>CKEditor</a
>
</li>
<li class="submenu-item">
<a href="form-editor-summernote.html" class="submenu-link"
>Summernote</a
>
</li>
<li class="submenu-item">
<a href="form-editor-tinymce.html" class="submenu-link"
>TinyMCE</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="table.html" class="sidebar-link">
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="table-datatable.html" class="submenu-link"
>Datatable</a
>
</li>
<li class="submenu-item">
<a href="table-datatable-jquery.html" class="submenu-link"
>Datatable (jQuery)</a
>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-widgets-chatbox.html" class="submenu-link"
>Chatbox</a
>
</li>
<li class="submenu-item">
<a href="ui-widgets-pricing.html" class="submenu-link"
>Pricing</a
>
</li>
<li class="submenu-item">
<a href="ui-widgets-todolist.html" class="submenu-link"
>To-do List</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-icons-bootstrap-icons.html" class="submenu-link"
>Bootstrap Icons
</a>
</li>
<li class="submenu-item">
<a href="ui-icons-fontawesome.html" class="submenu-link"
>Fontawesome</a
>
</li>
<li class="submenu-item">
<a href="ui-icons-dripicons.html" class="submenu-link"
>Dripicons</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-chart-chartjs.html" class="submenu-link"
>ChartJS</a
>
</li>
<li class="submenu-item">
<a href="ui-chart-apexcharts.html" class="submenu-link"
>Apexcharts</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="ui-file-uploader.html" class="sidebar-link">
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-map-google-map.html" class="submenu-link"
>Google Map</a
>
</li>
<li class="submenu-item">
<a href="ui-map-jsvectormap.html" class="submenu-link"
>JS Vector Map</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-three-dots"></i>
<span>Multi-level Menu</span>
</a>
<ul class="submenu">
<li class="submenu-item has-sub">
<a href="#" class="submenu-link">First Level</a>
<ul class="submenu submenu-level-2">
<li class="submenu-item">
<a href="ui-multi-level-menu.html" class="submenu-link"
>Second Level</a
>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">Second Level Menu</a>
</li>
</ul>
</li>
<li class="submenu-item has-sub">
<a href="#" class="submenu-link">Another Menu</a>
<ul class="submenu submenu-level-2">
<li class="submenu-item">
<a href="#" class="submenu-link">Second Level Menu</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li class="sidebar-item">
<a href="application-email.html" class="sidebar-link">
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-chat.html" class="sidebar-link">
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-gallery.html" class="sidebar-link">
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-checkout.html" class="sidebar-link">
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="auth-login.html" class="submenu-link">Login</a>
</li>
<li class="submenu-item">
<a href="auth-register.html" class="submenu-link"
>Register</a
>
</li>
<li class="submenu-item">
<a href="auth-forgot-password.html" class="submenu-link"
>Forgot Password</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="error-403.html" class="submenu-link">403</a>
</li>
<li class="submenu-item">
<a href="error-404.html" class="submenu-link">404</a>
</li>
<li class="submenu-item">
<a href="error-500.html" class="submenu-link">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li class="sidebar-item">
<a
href="https://zuramai.github.io/mazer/docs"
class="sidebar-link"
>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li class="sidebar-item">
<a
href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md"
class="sidebar-link"
>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li class="sidebar-item">
<a
href="https://github.com/zuramai/mazer#donation"
class="sidebar-link"
>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Navs</h3>
<p class="text-subtitle text-muted">
Examples for how to use Bootstrap’s included navigation
components.
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav
aria-label="breadcrumb"
class="breadcrumb-header float-start float-lg-end"
>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Navs
</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default</h4>
</div>
<div class="card-body">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Active</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Horizontal Navs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
href="#home"
role="tab"
aria-controls="home"
aria-selected="true"
>Home</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
href="#profile"
role="tab"
aria-controls="profile"
aria-selected="false"
>Profile</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
href="#contact"
role="tab"
aria-controls="contact"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<p class="my-2">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla ut nulla neque. Ut hendrerit nulla a
euismod pretium. Fusce venenatis sagittis ex efficitur
suscipit. In tempor mattis fringilla. Sed id tincidunt
orci, et volutpat ligula. Aliquam sollicitudin
sagittis ex, a rhoncus nisl feugiat quis. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nunc
ultricies ligula a tempor vulputate. Suspendisse
pretium mollis ultrices.
</p>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
Integer interdum diam eleifend metus lacinia, quis
gravida eros mollis. Fusce non sapien sit amet magna
dapibus ultrices. Morbi tincidunt magna ex, eget
faucibus sapien bibendum non. Duis a mauris ex. Ut
finibus risus sed massa mattis porta. Aliquam sagittis
massa et purus efficitur ultricies. Integer pretium
dolor at sapien laoreet ultricies. Fusce congue et lorem
id convallis. Nulla volutpat tellus nec molestie
finibus. In nec odio tincidunt eros finibus ullamcorper.
Ut sodales, dui nec posuere finibus, nisl sem aliquam
metus, eu accumsan lacus felis at odio. Sed lacus quam,
convallis quis condimentum ut, accumsan congue massa.
Pellentesque et quam vel massa pretium ullamcorper vitae
eu tortor.
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
<p class="mt-2">
Duis ultrices purus non eros fermentum hendrerit.
Aenean ornare interdum viverra. Sed ut odio velit.
Aenean eu diam dictum nibh rhoncus mattis quis ac
risus. Vivamus eu congue ipsum. Maecenas id
sollicitudin ex. Cras in ex vestibulum, posuere orci
at, sollicitudin purus. Morbi mollis elementum enim,
in cursus sem placerat ut.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4 class="card-title">Javascript Behavior</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-3">
<div
class="nav flex-column nav-pills"
id="v-pills-tab"
role="tablist"
aria-orientation="vertical"
>
<a
class="nav-link active"
id="v-pills-home-tab"
data-bs-toggle="pill"
href="#v-pills-home"
role="tab"
aria-controls="v-pills-home"
aria-selected="true"
>Home</a
>
<a
class="nav-link"
id="v-pills-profile-tab"
data-bs-toggle="pill"
href="#v-pills-profile"
role="tab"
aria-controls="v-pills-profile"
aria-selected="false"
>Profile</a
>
<a
class="nav-link"
id="v-pills-messages-tab"
data-bs-toggle="pill"
href="#v-pills-messages"
role="tab"
aria-controls="v-pills-messages"
aria-selected="false"
>Messages</a
>
<a
class="nav-link"
id="v-pills-settings-tab"
data-bs-toggle="pill"
href="#v-pills-settings"
role="tab"
aria-controls="v-pills-settings"
aria-selected="false"
>Settings</a
>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div
class="tab-pane fade show active"
id="v-pills-home"
role="tabpanel"
aria-labelledby="v-pills-home-tab"
>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla ut nulla neque. Ut hendrerit nulla a
euismod pretium. Fusce venenatis sagittis ex
efficitur suscipit. In tempor mattis fringilla. Sed
id tincidunt orci, et volutpat ligula. Aliquam
sollicitudin sagittis ex, a rhoncus nisl feugiat
quis. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc ultricies ligula a tempor
vulputate. Suspendisse pretium mollis ultrices.
</div>
<div
class="tab-pane fade"
id="v-pills-profile"
role="tabpanel"
aria-labelledby="v-pills-profile-tab"
>
Integer interdum diam eleifend metus lacinia, quis
gravida eros mollis. Fusce non sapien sit amet magna
dapibus ultrices. Morbi tincidunt magna ex, eget
faucibus sapien bibendum non. Duis a mauris ex. Ut
finibus risus sed massa mattis porta. Aliquam
sagittis massa et purus efficitur ultricies.
</div>
<div
class="tab-pane fade"
id="v-pills-messages"
role="tabpanel"
aria-labelledby="v-pills-messages-tab"
>
Integer pretium dolor at sapien laoreet ultricies.
Fusce congue et lorem id convallis. Nulla volutpat
tellus nec molestie finibus. In nec odio tincidunt
eros finibus ullamcorper. Ut sodales, dui nec
posuere finibus, nisl sem aliquam metus, eu accumsan
lacus felis at odio.
</div>
<div
class="tab-pane fade"
id="v-pills-settings"
role="tabpanel"
aria-labelledby="v-pills-settings-tab"
>
Sed lacus quam, convallis quis condimentum ut,
accumsan congue massa. Pellentesque et quam vel
massa pretium ullamcorper vitae eu tortor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2023 © Mazer</p>
</div>
<div class="float-end">
<p>
Crafted with
<span class="text-danger"
><i class="bi bi-heart-fill icon-mid"></i
></span>
by <a href="https://saugi.me">Saugi</a>
</p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/static/js/components/dark.js"></script>
<script src="assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/compiled/js/app.js"></script>
</body>
</html>