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="u-search-push-top">
<div class="container position-relative">
<div class="u-search-push-top__content">
<!-- Close Button -->
<button type="button" class="close u-search-push-top__close-btn"
aria-haspopup="true"
aria-expanded="false"
aria-controls="searchPushTop"
data-unfold-type="jquery-slide"
data-unfold-target="#searchPushTop">
<span aria-hidden="true">×</span>
</button>
<!-- End Close Button -->
<!-- Input -->
<form class="js-focus-state 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">
<strong class="d-block mb-2">Quick Links</strong>
<div class="row">
<!-- List Group -->
<div class="col-6">
<div class="list-group list-group-transparent list-group-flush list-group-borderless">
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Search Results List
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Search Results Grid
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
About
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Services
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Invoice
</a>
</div>
</div>
<!-- End List Group -->
<!-- List Group -->
<div class="col-6">
<div class="list-group list-group-transparent list-group-flush list-group-borderless">
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Profile
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
User Contacts
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Reviews
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Settings
</a>
</div>
</div>
<!-- End List Group -->
</div>
</div>
<div class="col-sm-6">
<!-- Banner -->
<div class="rounded u-search-push-top__banner">
<div class="d-flex align-items-center">
<div class="u-search-push-top__banner-container">
<img class="img-fluid u-search-push-top__banner-img" src="../../assets/img/mockups/img3.png" alt="Image Description">
<img class="img-fluid u-search-push-top__banner-img" src="../../assets/img/mockups/img2.png" alt="Image Description">
</div>
<div>
<div class="mb-4">
<strong class="d-block mb-2">Featured Item</strong>
<p>Create astonishing web sites and pages.</p>
</div>
<a class="btn btn-xs btn-soft-success transition-3d-hover" href="index.html">Apply Now <span class="fas fa-angle-right ml-2"></span></a>
</div>
</div>
</div>
<!-- End Banner -->
</div>
</div>
<!-- End Content -->
</div>
</div>
</div>
<!-- End Search -->
<!-- Search -->
<a class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button"
aria-haspopup="true"
aria-expanded="false"
aria-controls="searchPushTop"
data-unfold-type="jquery-slide"
data-unfold-target="#searchPushTop">
<span class="fas fa-search btn-icon__inner"></span>
</a>
<!-- End Search -->
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
afterOpen: function () {
$(this).find('input[type="search"]').focus();
}
});
// initialization of forms
$.HSCore.components.HSFocusState.init();
});
</script>
Classic search
<!-- Search -->
<div class="position-relative">
<a id="searchClassicInvoker" class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button"
aria-controls="searchClassic"
aria-haspopup="true"
aria-expanded="false"
data-unfold-target="#searchClassic"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fas fa-search btn-icon__inner"></span>
</a>
<!-- Input -->
<div id="searchClassic" class="dropdown-menu dropdown-unfold" aria-labelledby="searchClassicInvoker">
<form class="js-focus-state input-group px-3" style="width: 370px;">
<input class="form-control" type="search" placeholder="Search Front">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Search</button>
</div>
</form>
</div>
<!-- End Input -->
</div>
<!-- End Search -->
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
afterOpen: function () {
$(this).find('input[type="search"]').focus();
}
});
// initialization of forms
$.HSCore.components.HSFocusState.init();
});
</script>
Slide-down search
<!-- Search Content -->
<div id="searchSlideDown" class="dropdown-unfold u-search-slide-down" aria-labelledby="searchSlideDownInvoker">
<form>
<!-- Input Group -->
<div class="input-group input-group-borderless u-search-slide-down__input rounded mb-2">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fas fa-search"></span>
</span>
</div>
<input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
<div class="input-group-append">
<a class="input-group-text" href="javascript:;"
aria-label="close"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#searchSlideDown"
data-unfold-type="css-animation"
data-unfold-animation-in="active"
data-unfold-animation-out="fadeOutUp"
data-unfold-delay="0"
data-unfold-duration="800"
data-unfold-overlay='{
"className": "u-search-slide-down-bg-overlay",
"background": "rgba(55, 125, 255, .1)",
"animationSpeed": 400
}'>
<span class="fas fa-times" aria-hidden="true"></span>
</a>
</div>
</div>
<!-- End Input Group -->
<!-- Suggestions Content -->
<div class="rounded bg-white u-search-slide-down__suggestions py-3 px-5">
<ul class="list-group list-group-flush list-group-borderless mb-0">
<li><a class="list-group-item list-group-item-action" href="../pages/about-agency.html">About Front</a></li>
<li><a class="list-group-item list-group-item-action" href="../../starter/index.html">Getting Started</a></li>
<li><a class="list-group-item list-group-item-action" href="../../documentation/index.html">Documentation</a></li>
</ul>
</div>
<!-- End Suggestions Content -->
</form>
</div>
<!-- End Search Content -->
<!-- Search -->
<div class="position-relative">
<a id="searchSlideDownInvoker" class="btn btn-xs btn-icon btn-text-secondary u-search-slide-down-trigger" href="javascript:;" role="button"
aria-haspopup="true"
aria-expanded="false"
aria-controls="searchSlideDown"
data-unfold-type="css-animation"
data-unfold-hide-on-scroll="false"
data-unfold-target="#searchSlideDown"
data-unfold-animation-in="active"
data-unfold-animation-out="fadeOutUp"
data-unfold-delay="0"
data-unfold-duration="800"
data-unfold-overlay='{
"className": "u-search-slide-down-bg-overlay",
"background": "rgba(55, 125, 255, .1)",
"animationSpeed": 400
}'>
<span class="fas fa-search btn-icon__inner u-search-slide-down-trigger__icon"></span>
</a>
</div>
<!-- End Search -->
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
afterOpen: function () {
$(this).find('input[type="search"]').focus();
}
});
});
</script>