Section & Variations › Header
Available Parameters
| Parameter | Type | Description |
|---|---|---|
variation
|
Text
Default : header-default
|
Set variation for Header section. List of available variations :
|
navbarClasses
|
Text | Set clases for Navbar in Header section. |
navbarVariation
|
Text
Default : navbar-variation-1
|
Set variation for Navbar in Header section. List of available variations :
|
navbarMenus
|
Array of Menu Item | Set list of navbar menu. Example: [
|
breadcrumbs
|
Array of Menu Item | Set breadcrumbs for Header section. Example: [
|
title
|
Text
required |
Set title for Header section. |
subtitle
|
Text | Set sub title for Header section. |
description
|
Text | Set description for Header section. |
backgroundImage
|
Filename | Set background image for Header section. The value is name of image file in the [SRC-Assets]/images/ folder. |
ctaType
|
Text
alllow : default, include
|
Set type of CTA parameter value. |
cta
|
Text HTML -- or -- Twig FileName for : "ctaType":"include"
|
Display CTA in header section. Example: "ctaType" : "include",
|
additionalSection
|
Text | Include additional section for Header section. Example: "additionalSection" : "client.twig"
|
additionalSectionParams
|
Section Parameters | Set parameters for additional section. Example: {
|
Available Variations
Starter Kit Codes
{# include sections/header #}
{% include "../resources/sections/header.twig", with {
'variation' : 'header-navbar-only',
'navbarVariation' : 'navbar-variation-1',
'navbarMenus' : [
['#Top Deals', 'Top Deals'],
['#Package', 'Package'],
['#Review', 'Review'],
['#Blog', 'Blog'],
['#Contact', 'Contact'],
]
}
} %}
Starter Kit Codes
{# include sections/header #}
{% include "../resources/sections/header.twig", with {
'variation' : 'header-homepage-1',
'navbarClasses' : 'navbar-transparent',
'navbarVariation' : 'navbar-variation-1',
'navbarMenus' : [
['#Top Deals', 'Top Deals'],
['#Package', 'Package'],
['#Review', 'Review'],
['#Blog', 'Blog'],
['#Contact', 'Contact'],
],
'subtitle' : 'Welcome to Vendora Adventures!',
'title' : 'Your gateway to unforgettable journeys',
'backgroundImage' : 'travel-homepage-header-bg.png',
'ctaType' : 'include',
'cta' : 'partials/form-booking-header.twig',
'additionalSection' : 'client.twig',
'additionalSectionParams' : {
'title' : false,
'variation' : 'client-variation-1',
'images' : [
'client-image-96-1-white.svg',
'client-image-96-2-white.svg',
'client-image-96-3-white.svg',
'client-image-96-4-white.svg',
'client-image-96-5-white.svg',
'client-image-96-6-white.svg',
]
}
} %}
Starter Kit Codes
{# include sections/header #}
{% include "../resources/sections/header.twig", with {
'variation' : 'header-homepage-2',
'withPromoBar' : true,
'navbarVariation' : 'navbar-variation-2',
'navbarMenus' : [
['#New', 'New'],
['#Men', 'Men'],
['#Woman', 'Woman'],
['#Kids', 'Kids'],
['#Collection', 'Collection'],
],
'subtitle' : 'Summer Sale',
'title' : 'FW 23/24',
'backgroundImage' : 'fashion-homepage-header-bg.png',
'cta' : '<a href="#product-list" class="btn btn-xl btn-icon btn-white">NEW COLLECTION <i class="ic ic-caret-right dark-1"></i></a>'
} %}
Starter Kit Codes
{# include sections/header #}
{% include "../resources/sections/header.twig", with {
'variation' : 'header-homepage-3',
'navbarVariation' : 'navbar-variation-1',
'navbarMenus' : [
['#Bestsellers', 'Bestsellers'],
['#Skincare', 'Skincare'],
['#Makeup', 'Makeup'],
['#Suncare', 'Suncare'],
['#Contact', 'Contact'],
],
'navbarRightMenuType' : 'icons',
'title' : 'Radiate confidence with Vendora Glow',
'description' : 'Discover your true beauty with our luxurious skincare products.',
'cta' : '<a href="#product-list" class="btn btn-xl btn-icon btn-white">Explore Now <i class="ic ic-caret-right dark-1"></i></a>',
'images' : [
'fashion-homepage-header-image-1.png',
'fashion-homepage-header-image-2.png',
'fashion-homepage-header-image-3.png',
]
} %}
Starter Kit Codes
{# include sections/header #}
{% include "../resources/sections/header.twig", with {
'variation' : 'header-product-list-1',
'navbarVariation' : 'navbar-variation-1',
'navbarMenus' : [
['#Top Deals', 'Top Deals'],
['#Package', 'Package'],
['#Review', 'Review'],
['#Blog', 'Blog'],
['#Contact', 'Contact'],
],
'breadcrumbs' : [
['#Asia', 'Asia'],
['#Indonesia', 'Indonesia'],
['#Bali', 'Bali'],
['#Bali Hotels', 'Bali Hotels'],
],
'title' : 'Bali Hotels and Places to Stay',
'description' : 'Enter your dates to get the best place to stay!',
'ctaType' : 'include',
'cta' : 'partials/form-booking-header.twig'
} %}
Starter Kit Codes
{# include sections/header #}
{% include "../resources/sections/header.twig", with {
'variation' : 'header-product-list-2',
'withPromoBar' : true,
'navbarVariation' : 'navbar-variation-2',
'navbarMenus' : [
['#New', 'New'],
['#Men', 'Men'],
['#Woman', 'Woman'],
['#Kids', 'Kids'],
['#Collection', 'Collection'],
],
'title' : 'New Arrivals',
'description' : 'Beauty is in the details lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique comfort and quality go hand in hand and these materials.'
} %}
Starter Kit Codes
{# include sections/header #}
{% include "../resources/sections/header.twig", with {
'variation' : 'header-product-list-3',
'navbarVariation' : 'navbar-variation-1',
'navbarMenus' : [
['#Bestsellers', 'Bestsellers'],
['#Skincare', 'Skincare'],
['#Makeup', 'Makeup'],
['#Suncare', 'Suncare'],
['#Contact', 'Contact']
],
'navbarRightMenuType' : 'icons',
'title' : 'All Skincare',
'description' : 'Transformative cleansers, serums, and moisturizers address needs for all skin types with cutting-edge science and time-tested ingredients.',
'cta' : '<div class="dropdown">
<button class="btn btn-lg btn-outline-dark-3 dropdown-toggle btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>Filter</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">All</a></li>
<li><a class="dropdown-item" href="#">Category</a></li>
</ul>
</div>'
} %}