Header Search Forms
Various search form controls and components within a navbar.
Search push from top
Quick Links
Featured Item
Apply Now
Create astonishing web sites and pages.
<!-- Search -->
<div id="searchPushTop" class="search-push-top">
<div class="container position-relative">
<div class="search-push-top-content">
<!-- Close Button -->
<div class="search-push-top-close-btn">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-soft-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchPushTop",
"type": "jquery-slide"
}'>
<svg width="10" height="10" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</a>
</div>
</div>
<!-- End Close Button -->
<!-- Input -->
<form class="input-group">
<input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
<div class="input-group-append">
<button type="button" class="btn btn-primary">Search</button>
</div>
</form>
<!-- End Input -->
<!-- Content -->
<div class="row d-none d-md-flex mt-7">
<div class="col-sm-6">
<span class="h5">Quick Links</span>
<div class="row">
<!-- Nav Link -->
<div class="col-6">
<div class="nav nav-sm nav-x-0 flex-column">
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Search Results List
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Search Results Grid
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
About
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Services
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Invoice
</a>
</div>
</div>
<!-- End Nav Link -->
<!-- Nav Link -->
<div class="col-6">
<div class="nav nav-sm nav-x-0 flex-column">
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Profile
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
User Contacts
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Reviews
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Settings
</a>
</div>
</div>
<!-- End Nav Link -->
</div>
</div>
<div class="col-sm-6">
<!-- Banner -->
<div class="rounded search-push-top-banner">
<div class="d-flex align-items-center">
<div class="search-push-top-banner-container">
<img class="img-fluid search-push-top-banner-img" src="../../assets/img/mockups/img3.png" alt="Image Description">
<img class="img-fluid search-push-top-banner-img" src="../../assets/img/mockups/img2.png" alt="Image Description">
</div>
<div>
<div class="mb-4">
<span class="h5">Featured Item</span>
<p>Create astonishing web sites and pages.</p>
</div>
<a class="btn btn-xs btn-soft-success transition-3d-hover" href="#">Apply Now <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
</div>
<!-- End Banner -->
</div>
</div>
<!-- End Content -->
</div>
</div>
</div>
<!-- End Search -->
<!-- Search -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchPushTop",
"type": "jquery-slide"
}'>
<i class="fas fa-search"></i>
</a>
</div>
<!-- End Search -->
<!-- JS Front -->
<script src="../../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>
Classic search
<!-- Search -->
<div class="hs-unfold mr-2">
<a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchClassic",
"type": "css-animation",
"animationIn": "slideInUp"
}'>
<i class="fas fa-search la-lg"></i>
</a>
<div id="searchClassic" class="hs-unfold-content dropdown-menu w-100 border-0 rounded-0 px-3 mt-0" style="min-width: 400px;">
<form class="input-group input-group-sm input-group-merge">
<input type="text" class="form-control" placeholder="What do you want to learn?" aria-label="What do you want to learn?">
<div class="input-group-append">
<button type="button" class="btn">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
<!-- End Search -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>
Slide-down search
<!-- Search Content -->
<div id="searchSlideDown" class="hs-unfold-content dropdown-unfold search-slide-down">
<form>
<!-- Input Group -->
<div class="input-group input-group-borderless search-slide-down-input bg-white rounded mb-2">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
</div>
<input id="searchSlideDownControl" type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
<div class="input-group-append">
<a class="js-hs-search-unfold-invoker input-group-text" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchSlideDown",
"type": "css-animation",
"animationIn": "fadeIn search-slide-down-show",
"animationOut": "fadeOutUp",
"cssAnimatedClass": null,
"hasOverlay": true,
"overlayClass": ".search-slide-down-bg-overlay",
"overlayStyles": {
"background": "rgba(55, 125, 255, .1)"
},
"duration": 800,
"hideOnScroll": false
}'>
<i class="fas fa-times" aria-hidden="true"></i>
</a>
</div>
</div>
<!-- End Input Group -->
<!-- Suggestions Content -->
<div class="rounded bg-white search-slide-down-suggestions py-3 px-5">
<ul class="list-unstyled list-sm-article mb-0">
<li><a href="#">About Front</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">Documentation</a></li>
</ul>
</div>
<!-- End Suggestions Content -->
</form>
</div>
<!-- End Search Content -->
<!-- Search -->
<div class="position-relative">
<a class="js-hs-search-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary search-slide-down-trigger" href="javascript:;" role="button"
data-hs-unfold-options='{
"target": "#searchSlideDown",
"type": "css-animation",
"animationIn": "fadeIn search-slide-down-show",
"animationOut": "fadeOutUp",
"cssAnimatedClass": null,
"hasOverlay": true,
"overlayClass": ".search-slide-down-bg-overlay",
"overlayStyles": {
"background": "rgba(55, 125, 255, .1)"
},
"duration": 800,
"hideOnScroll": false
}'>
<i class="fas fa-search search-slide-down-trigger-icon"></i>
</a>
</div>
<!-- End Search -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold
$('.js-hs-search-unfold-invoker').each(function() {
var searchUnfold = new HSUnfold($(this), {
afterOpen: function() {
$('#searchSlideDownControl').focus();
}
}).init();
});
});
</script>