3036 lines
140 KiB
HTML
3036 lines
140 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Navbar - Documentation | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<link rel="stylesheet" href="../assets/css/vendor.min.css">
|
||
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
||
<link rel="stylesheet" href="../assets/css/docs.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="docsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in docs" aria-label="Search in docs">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu navbar-dropdown-menu-borderless w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h3 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment nav-fill nav-justified">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/index.html">Docs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../snippets/index.html">Snippets</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Documentation</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Getting started</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/getting-started.html">Getting Started</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/gulp.html">Gulp</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/customization.html">Customization</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/credits.html">Credits</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/changelog.html">Changelog</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Design & Graphics</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/bs-icons.html">Bootstrap Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/duotone-icons.html">Duotone Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/illustrations.html">Illustrations</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Components</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/accordion.html">Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/alerts.html">Alerts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/avatars.html">Avatars</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/badge.html">Badge</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/buttons.html">Buttons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/cards.html">Cards</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/collapse.html">Collapse</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/column-divider.html">Column Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/devices.html">Devices</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/divider.html">Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropdowns.html">Dropdowns</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/icons.html">Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/list-group.html">List Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/legend-indicator.html">Legend Indicator</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/modal.html">Modal</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/offcanvas.html">Offcanvas</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/page-header.html">Page Header</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/pagination.html">Pagination</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/popovers.html">Popovers</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/progress.html">Progress</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/profile.html">Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shapes.html">Shapes</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spinners.html">Spinners</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/steps.html">Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tab.html">Tab</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/text-highlight.html">Text Highlight</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toasts.html">Toasts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tooltips.html">Tooltips</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typography.html">Typography</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Navbars</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/navbar.html">Navbar</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navs.html">Navs</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/mega-menu.html">Mega Menu</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/scrollspy.html">Scrollspy</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Basic forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/basic-forms.html">Basic Forms</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/checks-and-switches.html">Checks & Switches</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-group.html">Input Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Advanced Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/select.html">Advanced Select</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/file-attachments.html">File Attachments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropzone.html">Drag’ n’ Drop File Uploads</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quill.html">WYSIWYG Editor</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quantity-counter.html">Quantity Counter</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-mask.html">Input Mask</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/step-forms.html">Step Forms (Wizards)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/range-slider.html">Range Slider (noUiSlider)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/add-field.html">Add Field</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-password.html">Toggle Password</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/count-characters.html">Count Characters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-switch.html">Toggle Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-state.html">Toggle State</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/switch.html">Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Media</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/fslightbox.html">Fullscreen Lightbox</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/video-bg.html">Video Background</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/video-player.html">Video Player</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/swiper.html">Swiper</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Others</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/maps-leaflet.html">Maps (Leaflet)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/chartjs.html">Chart.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/circles.html">Circles.js (Pie Chart)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sticky-block.html">Sticky Block</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/countdown.html">Countdown</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sorting.html">Sorting (Shuffle.js)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/go-to.html">Go To</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/show-animation.html">Show Animation</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typedjs.html">Typed.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Utilities</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/backgrounds.html">Backgrounds</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/borders.html">Borders</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/colors.html">Colors</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/links.html">Links</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/position.html">Position</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/rotations.html">Rotations</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shadows.html">Shadows</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sizing.html">Sizing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spacing.html">Spacing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/z-index.html">Z-index</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Navbar</h1>
|
||
<p class="docs-page-header-text">Powerful and responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for the collapse plugin.</p>
|
||
<a class="link" href="https://getbootstrap.com/docs/5.0/components/navbar/" target="_blank">Bootstrap Navbar documentation <i class="bi-box-arrow-up-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark" role="alert">
|
||
<span class="fw-semi-bold">Heads up!</span> HS-Header does not need to be used with the pure Bootstrap navbar examples, but should only be included only in these <a class="link" href="../documentation/navbar.html#methods">cases</a>.
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="how-to-use" class="hs-docs-heading">
|
||
How to use <a class="anchorjs-link" href="#how-to-use" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Copy-paste the following <code><script></code> near the end of your pages under <em><u>JS Implementing Plugins</u></em> to enable it.</p>
|
||
|
||
<pre class="rounded mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
</code>
|
||
</pre>
|
||
|
||
<p>Copy-paste the init function under <em><u>JS Plugins Init.</u></em>, before the closing <code></body></code> tag, to enable it.</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF NAVBAR
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
});
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="using-mega-menu-with-header" class="hs-docs-heading">
|
||
Using mega menu with header <a class="anchorjs-link" href="#using-mega-menu-with-header" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Copy-paste the stylesheet <code><link></code> into your <code><head></code> to load the CSS.</p>
|
||
|
||
<pre class="rounded mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
||
</code>
|
||
</pre>
|
||
|
||
<p>Copy-paste the following <code><script></code> near the end of your pages under <em><u>JS Implementing Plugins</u></em> to enable it.</p>
|
||
|
||
<pre class="rounded mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
||
</code>
|
||
</pre>
|
||
|
||
<p>Copy-paste the init function under <em><u>JS Plugins Init.</u></em>, before the closing <code></body></code> tag, to enable it.</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF MEGA MENU
|
||
// =======================================================
|
||
const megaMenu = new HSMegaMenu('.js-mega-menu')
|
||
});
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="basic" class="hs-docs-heading">
|
||
Basic <a class="anchorjs-link" href="#basic" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Choose from <code>.navbar-light</code> for use with light background colors, or <code>.navbar-dark</code> for dark background colors.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent1">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenu">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenu">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="dropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="megaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="megaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-end navbar-light bg-white mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuLightEg" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuLightEg">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuLightEg">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenuLightEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="dropdownSubMenuLightEg" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="megaMenuLightEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="megaMenuLightEg">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-end navbar-dark bg-primary">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo-white.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuDark" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuDark">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuDark">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenuDarkEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="dropdownSubMenuDarkEg" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="megaMenuDarkEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="megaMenuDarkEg">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Header -->
|
||
<header class="navbar navbar-expand-lg navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<div class="navbar-brand-wrapper">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
</div>
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenu">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenu">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="dropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="megaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="megaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
|
||
<!-- Header -->
|
||
<header class="navbar navbar-expand-lg navbar-end navbar-light bg-white mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<div class="navbar-brand-wrapper">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
</div>
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuLightEg" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuLightEg">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuLightEg">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenuLightEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="dropdownSubMenuLightEg" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="megaMenuLightEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="megaMenuLightEg">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
|
||
<!-- Header -->
|
||
<header class="navbar navbar-expand-lg navbar-end navbar-dark bg-primary">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<div class="navbar-brand-wrapper">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo-white.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
</div>
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuDark" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuDark">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuDark">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenuDarkEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="dropdownSubMenuDarkEg" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="megaMenuDarkEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="megaMenuDarkEg">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="height" class="hs-docs-heading">
|
||
Height <a class="anchorjs-link" href="#height" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.navbar-height</code> for fixed height navbar.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent2">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuHeight" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuHeight">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuHeight">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarHeightDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="navbarHeightDropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarHeightMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="navbarHeightMegaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Header -->
|
||
<header class="navbar navbar-expand-lg navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<div class="navbar-brand-wrapper">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
</div>
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuHeight" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuHeight">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuHeight">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarHeightDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="navbarHeightDropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarHeightMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="navbarHeightMegaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="shadow" class="hs-docs-heading">
|
||
Shadow <a class="anchorjs-link" href="#shadow" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.navbar-shadow</code> to add shadow.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab6" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab6" href="#nav-result6" data-bs-toggle="pill" data-bs-target="#nav-result6" role="tab" aria-controls="nav-result6" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab6" href="#nav-html6" data-bs-toggle="pill" data-bs-target="#nav-html6" role="tab" aria-controls="nav-html6" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent6">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result6" role="tabpanel" aria-labelledby="nav-resultTab6">
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-shadow navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuShadow" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuShadow">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuShadow">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarShadowDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="navbarShadowDropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarShadowMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="navbarShadowMegaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Header -->
|
||
<header class="navbar navbar-expand-lg navbar-shadow navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<div class="navbar-brand-wrapper">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
</div>
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuShadow" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuShadow">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuShadow">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarShadowDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="navbarShadowDropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarShadowMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="navbarShadowMegaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="navbar-alignments" class="hs-docs-heading">
|
||
Navbar alignments <a class="anchorjs-link" href="#navbar-alignments" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>By default, navbars are left aligned.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab10" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab10" href="#nav-result10" data-bs-toggle="pill" data-bs-target="#nav-result10" role="tab" aria-controls="nav-result10" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab10" href="#nav-html10" data-bs-toggle="pill" data-bs-target="#nav-html10" role="tab" aria-controls="nav-html10" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent10">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result10" role="tabpanel" aria-labelledby="nav-resultTab10">
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-shadow mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuLeftAligned" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuLeftAligned">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuLeftAligned">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarLeftAlignedDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="navbarLeftAlignedDropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarLeftAlignedMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="navbarLeftAlignedMegaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Header -->
|
||
<header class="navbar navbar-expand-lg navbar-shadow navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<div class="navbar-brand-wrapper">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
</div>
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuLeftAligned" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuLeftAligned">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuLeftAligned">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarLeftAlignedDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="navbarLeftAlignedDropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarLeftAlignedMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="navbarLeftAlignedMegaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>Use <code>.navbar-end</code> class to right align the navbar</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab11" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab11" href="#nav-result11" data-bs-toggle="pill" data-bs-target="#nav-result11" role="tab" aria-controls="nav-result11" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab11" href="#nav-html11" data-bs-toggle="pill" data-bs-target="#nav-html11" role="tab" aria-controls="nav-html11" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent11">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result11" role="tabpanel" aria-labelledby="nav-resultTab11">
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-shadow navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuRightAligned" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuRightAligned">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuRightAligned">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarRightAlignedDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="navbarRightAlignedDropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarRightAlignedMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="navbarRightAlignedMegaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html11" role="tabpanel" aria-labelledby="nav-htmlTab11">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Header -->
|
||
<header class="navbar navbar-expand-lg navbar-shadow navbar-end mb-3">
|
||
<div class="container">
|
||
<div class="navbar-nav-wrap">
|
||
<div class="navbar-brand-wrapper">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
</div>
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuRightAligned" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuRightAligned">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuRightAligned">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarRightAlignedDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="navbarRightAlignedDropdownSubMenu" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarRightAlignedMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<div class="dropdown-menu w-100" aria-labelledby="navbarRightAlignedMegaMenu">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">One</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Two</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3 mb-3 mb-lg-0">
|
||
<span class="dropdown-header">Three</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
</div>
|
||
|
||
<div class="col-lg-3">
|
||
<span class="dropdown-header">Four</span>
|
||
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="with-hs-mega-menu" class="hs-docs-heading">
|
||
With <code>hs-mega-menu.js</code> <a class="anchorjs-link" href="#with-hs-mega-menu" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Want to add show/hide animations or change the event type to <code>hover</code>? <code>hs-mega-menu.js</code> is the way to do them and many more.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-cssTab3" href="#nav-css3" data-bs-toggle="pill" data-bs-target="#nav-css3" role="tab" aria-controls="nav-css3" aria-selected="false">CSS</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab3" href="#nav-js3" data-bs-toggle="pill" data-bs-target="#nav-js3" role="tab" aria-controls="nav-js3" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark card-alert" role="alert">
|
||
This example uses <a class="alert-link" href="../documentation/mega-menu.html">HS Mega Menu <i class="bi-link-45deg"></i></a> library.
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent3">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-end navbar-light bg-white">
|
||
<div class="container">
|
||
<div class="js-mega-menu navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuWithMegaMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuWithMegaMenu">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuWithMegaMenu">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="hs-has-sub-menu nav-item">
|
||
<a class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" id="headerWithMegaMenuDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="headerWithMegaMenuDropdown" style="min-width: 12rem;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
|
||
<!-- Dropdown -->
|
||
<div class="hs-has-sub-menu">
|
||
<a class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" id="navbarWithMegaMenuDropdownSub" role="button" data-bs-toggle="dropdown" aria-expanded="false">Sub dropdown</a>
|
||
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="navbarWithMegaMenuDropdownSub" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Dropdown -->
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="hs-has-mega-menu nav-item">
|
||
<a class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" id="navbarWithMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-mega-menu hs-position-right dropdown-menu w-100" aria-labelledby="navbarWithMegaMenu">
|
||
<!-- Main Content -->
|
||
<div class="navbar-dropdown-menu-inner">
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md">
|
||
<span class="dropdown-header">One</span>
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md mb-3 mb-md-0">
|
||
<span class="dropdown-header">Two</span>
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md mb-3 mb-md-0">
|
||
<span class="dropdown-header">Three</span>
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md">
|
||
<span class="dropdown-header">Four</span>
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Main Content -->
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Header -->
|
||
<header class="docs-navbar navbar navbar-expand-lg navbar-end navbar-light bg-white">
|
||
<div class="container">
|
||
<div class="js-mega-menu navbar-nav-wrap">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
|
||
<!-- Toggle -->
|
||
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuWithMegaMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuWithMegaMenu">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggle -->
|
||
|
||
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuWithMegaMenu">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="hs-has-sub-menu nav-item">
|
||
<a class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" id="headerWithMegaMenuDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="headerWithMegaMenuDropdown" style="min-width: 12rem;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
|
||
<!-- Dropdown -->
|
||
<div class="hs-has-sub-menu">
|
||
<a class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" id="navbarWithMegaMenuDropdownSub" role="button" data-bs-toggle="dropdown" aria-expanded="false">Sub dropdown</a>
|
||
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="navbarWithMegaMenuDropdownSub" style="min-width: 230px;">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Dropdown -->
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Dropdown -->
|
||
|
||
<!-- Nav Item -->
|
||
<li class="hs-has-mega-menu nav-item">
|
||
<a class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" id="navbarWithMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-mega-menu hs-position-right dropdown-menu w-100" aria-labelledby="navbarWithMegaMenu">
|
||
<!-- Main Content -->
|
||
<div class="navbar-dropdown-menu-inner">
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md">
|
||
<span class="dropdown-header">One</span>
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md mb-3 mb-md-0">
|
||
<span class="dropdown-header">Two</span>
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md mb-3 mb-md-0">
|
||
<span class="dropdown-header">Three</span>
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md">
|
||
<span class="dropdown-header">Four</span>
|
||
<a class="dropdown-item" href="#">One</a>
|
||
<a class="dropdown-item" href="#">Two</a>
|
||
<a class="dropdown-item" href="#">Three</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Main Content -->
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Nav Item -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- End Header -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-css3" role="tabpanel" aria-labelledby="nav-cssTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js3" role="tabpanel" aria-labelledby="nav-jsTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
||
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF MEGA MENU
|
||
// =======================================================
|
||
var megaMenu = new HSMegaMenu($('.js-mega-menu'), {
|
||
desktop: {
|
||
position: 'left'
|
||
}
|
||
}).init();
|
||
});
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="vertical" class="hs-docs-heading">
|
||
Vertical <a class="anchorjs-link" href="#vertical" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Create a vertical navigation with <code>.navbar-vertical</code>.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent4">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
||
<!-- Navbar Vertical -->
|
||
<div class="navbar navbar-vertical" style="max-width: 16rem;">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pages</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Users</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Settings</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
<!-- End Navbar Vertical -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Navbar Vertical -->
|
||
<div class="navbar navbar-vertical" style="max-width: 16rem;">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav navbar-nav-lg nav-tabs">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pages</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Users</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Settings</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
<!-- End Navbar Vertical -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="vertical-toggler" class="hs-docs-heading">
|
||
Toggler <a class="anchorjs-link" href="#vertical-toggler" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Navbar will be collapsed below medium size resolution. Reduce browser size to see it in action.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab5" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab5" href="#nav-result5" data-bs-toggle="pill" data-bs-target="#nav-result5" role="tab" aria-controls="nav-result5" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab5" href="#nav-html5" data-bs-toggle="pill" data-bs-target="#nav-html5" role="tab" aria-controls="nav-html5" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent5">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result5" role="tabpanel" aria-labelledby="nav-resultTab5">
|
||
<!-- Navbar Vertical -->
|
||
<div class="navbar navbar-vertical navbar-expand-md">
|
||
<!-- Navbar Toggle -->
|
||
<div class="d-grid flex-grow-1">
|
||
<button type="button" class="navbar-toggler btn btn-white" data-bs-toggle="collapse" data-bs-target="#navbarTogglerNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarTogglerNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span>Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<div id="navbarTogglerNavMenu" class="collapse navbar-collapse">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pages</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Users</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Settings</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Vertical -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Navbar Vertical -->
|
||
<div class="navbar navbar-vertical navbar-expand-md">
|
||
<!-- Navbar Toggle -->
|
||
<div class="d-grid flex-grow-1">
|
||
<button type="button" class="navbar-toggler btn btn-white" data-bs-toggle="collapse" data-bs-target="#navbarTogglerNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarTogglerNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span>Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<div id="navbarTogglerNavMenu" class="collapse navbar-collapse">
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pages</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Users</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Settings</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Vertical -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="responsive-behaviors" class="hs-docs-heading">
|
||
Responsive behaviors <a class="anchorjs-link" href="#responsive-behaviors" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Placement classes can utilize <code>.navbar-*{-sm|-md|-lg|-xl}</code>. Learn more <a class="link" href="#behaviors">placement behaviors</a>.</p>
|
||
|
||
<p>Navbars can utilize <code>.navbar-toggler</code>, <code>.navbar-collapse</code>, and <code>.navbar-expand{-sm|-md|-lg|-xl}</code> classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.</p>
|
||
|
||
<p>For navbars that never collapse, add the <code>.navbar-expand</code> class on the navbar. For navbars that always collapse, don't add any <code>.navbar-expand</code> class.</p>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="methods" class="hs-docs-heading">
|
||
Methods <a class="anchorjs-link" href="#methods" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-hs-header-options='{}'</code>.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-thead-bordered">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Parameters</th>
|
||
<th style="width: 50%;">Description</th>
|
||
<th class="text-nowrap">Default value</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<p><code>fixMoment</code></p>
|
||
</td>
|
||
<td>The distance after which the <code>js-navbar-fix-moment</code> class will be added to the initialized element, which initializes the animation specified in <code>fixEffect</code></td>
|
||
<td><code>0</code></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<p><code>fixMomentClasses</code></p>
|
||
</td>
|
||
<td>
|
||
If the header contains elements with the class navbar-section, then it adds the classes specified in
|
||
<pre class="rounded">
|
||
<code class="language-html" data-lang="html">
|
||
data-hs-header-item-options='{
|
||
"fixMomentClasses": "bg-dark"
|
||
}'
|
||
</code>
|
||
</pre>
|
||
Otherwise, it searches for the given parameter in <code>data-hs-header-options</code> and adds classes to the header. These classes are added when the scroll value is greater than or equal to the value in <code>fixMoment</code>
|
||
</td>
|
||
<td><code>null</code></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<p><code>fixMomentExclude</code></p>
|
||
</td>
|
||
<td>
|
||
If the header contains elements with the class <code>navbar-section</code>, then removes the classes specified in the elements
|
||
<pre class="rounded">
|
||
<code class="language-html" data-lang="html">
|
||
data-hs-header-item-options='{
|
||
"fixMomentExclude": "bg-white"
|
||
}'
|
||
</code>
|
||
</pre>
|
||
Otherwise, it looks for this parameter in <code>data-hs-header-options</code> and removes the classes from the header. These classes are deleted when the scroll value is greater than or equal to the value in <code>fixMoment</code>
|
||
</td>
|
||
<td><code>null</code></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<p><code>fixEffect</code></p>
|
||
</td>
|
||
<td>Determines with what effect the initialized element disappears. There are 2 options: <code>slide</code>, <code>fade</code></td>
|
||
<td><code>'slide'</code></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<p><code>breakpoint</code></p>
|
||
</td>
|
||
<td>Determines with what permission the plugin is initialized.</td>
|
||
<td><code>'lg'</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="placement-classes" class="hs-docs-heading">
|
||
Placement classes <a class="anchorjs-link" href="#placement-classes" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>List of available classes and their descriptions.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-thead-bordered">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Parameters</th>
|
||
<th style="width: 50%;">Description</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<p><code>.navbar-absolute-{media-type}-top</code></p>
|
||
</td>
|
||
<td>Practically the same as static, but the geometry of this type of header is not taken into account when rendering the page (because of <code>position: absolute;</code>). This type of header is well suited for transparent/half-transparent header designs that are displayed on top of the slider/hero/etc. Its geometry is taken into account when rendering a page.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<p><code>.navbar-sticky-{media-type}-top</code></p>
|
||
</td>
|
||
<td>It is displayed as sticking to the top of the screen always (<code>position: fixed; top: 0;</code>). The geometry of this header is also excluded from the calculation of the positioning of all elements on the page.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="behaviors" class="hs-docs-heading">
|
||
Behaviors <a class="anchorjs-link" href="#behaviors" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>List of available classes and their descriptions.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-thead-bordered">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Parameters</th>
|
||
<th style="width: 50%;">Description</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<p><code>.navbar-show-hide</code></p>
|
||
</td>
|
||
<td>
|
||
Show/hide an item when scrolling to the user specified time. This moment is given in the form of the number of scrolled pixels, through the attribute <code>data-navbar-fix-moment=""</code>. There are 3 available options for how to show/hide an element using the <code>data-navbar-fix-effect=""</code> attribute:
|
||
|
||
<ul>
|
||
<li>slide</li>
|
||
<li>fade</li>
|
||
<li>show-hide</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<p><code>.navbar-toggle</code></p>
|
||
</td>
|
||
<td>Show/hide one of the header sections (preferably the very first) at the user specified time. This moment is specified as the number of scrolled pixels, through the attribute <code>data-navbar-fix-moment=""</code>. For this, the section itself needs to be given the class <code>.navbar-section-hidden</code>.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<p><code>.navbar-invulnerable<span>-{media-type}</span></code></p>
|
||
</td>
|
||
<td>
|
||
This class is auxiliary and is used to reset the previous behavior (with the previous permission, if the user has changed the window size) on a certain viewport. For example, if the user wants to open/show a section on <code>-xs, -sm</code>, but not higher. (Because Front alike Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.), having set <code>-sm</code> it will work and on permissions above, in order to prevent it use this class.<br>For example:
|
||
|
||
<pre class="rounded">
|
||
<code class="language-html" data-lang="html">
|
||
<header class="navbar-toggle-section navbar-invulnerable-md">
|
||
...
|
||
</header>
|
||
</code>
|
||
</pre>
|
||
|
||
here the behavior of <code>toggle-section</code> will work until the resolution is <code>-md (that is, xs, sm)</code>, on viewport <code>-md</code> it will not work.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="behaviors-examples" class="hs-docs-heading">
|
||
Behavior examples <a class="anchorjs-link" href="#behaviors-examples" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-thead-bordered">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>These placement classes can have the following behavior classes</th>
|
||
<th style="width: 50%;">Description</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<p><code>.navbar-absolute-{media-type}-top</code></p>
|
||
</td>
|
||
<td>
|
||
<ul>
|
||
<li><code>.navbar-show-hide-{media-type}</code></li>
|
||
<li><code>.navbar-change-logo-{media-type}</code></li>
|
||
<li><code>.navbar-change-appearance-{media-type}</code></li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<p><code>.navbar-sticky-{media-type}-top</code></p>
|
||
</td>
|
||
<td>
|
||
<ul>
|
||
<li><code>.navbar-show-hide-{media-type}</code></li>
|
||
<li><code>.navbar-change-logo-{media-type}</code></li>
|
||
<li><code>.navbar-change-appearance-{media-type}</code></li>
|
||
<li><code>.navbar-toggle-section-{media-type}</code></li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/js/vendor.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF NAVBAR
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF NAV SCROLLER
|
||
// =======================================================
|
||
new HsNavScroller('.js-nav-scroller', {
|
||
delay: 400,
|
||
offset: 140
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
const docsSearch = HSCore.components.HSList.init('#docsSearch')
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/docs-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
docsSearch.getItem(0).add(data)
|
||
})
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
|
||
|
||
// INITIALIZATION OF MEGA MENU
|
||
// =======================================================
|
||
new HSMegaMenu('.js-mega-menu', {
|
||
desktop: {
|
||
position: 'left'
|
||
}
|
||
})
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|