<templates:header>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header
ATTRIBUTES
EXAMPLES
templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<templates:header>` </...>

Header element which provides structure to primary navigation and logo placement.

Content

any
Content to render inside the Header.

Attributes

- `contentSize`
string
Content Size

Valid options: sm, md, lg
- `height`
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
- `id`
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `logo`
string
Logo Src

Set a path for a logo image.
- `logoAlt`
string
Logo Alt

Set an alternative text description for the Logo image.
- `logoLink`
string
Logo Link

Set a link which should be applied to the Logo image.
- `maxLogoHeight`
string
Logo Max Height

The max-height of the Logo. Can be in any standard CSS unit, but is usually px.
- `maxLogoWidth`
string
Logo Max Width

The max-width of the Logo. Can be in any standard CSS unit, but is usually px.
- `width`
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
- `navbgcolor`
string
Navigation Background Color

Sets the background colour of the header's navigation menu.
- `navfontcolor`
string
Navigation Font Color

Sets the font colour of the header's navigation menu.

Examples

Slim Header Template

Using a Slim variant to display header section with logo, site navigation, and login button

HTML:

<templates:header variant="Slim" maxlogowidth="100px" maxlogoheight="70px" bgcolor="rgba(0,0,0,1)" contentsize="md" navbgcolor="rgba(0,0,0,1)" navfontcolor="#ffffff" logo="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png"> <navigation:primary rootpage="/" id="headerNav" includestyles="true" preventwrap="true" autopopulatelevel="2" openonhover="true"> <navigation:item at="end" page="/search/"> <standard:icon name="search" library="fontawesome" style="width: 16px; height: 16px" /> </navigation:item> </navigation:primary> <templates:button headerposition="primary" variant="Classic" href="/community/login">Login</templates:button> </templates:header>

Header Widget

Add a section above the header to display additional details.

HTML:

<templates:section paddingtop="1rem" paddingbottom="1rem" paddingleft="0" paddingright="0" bgcolor=""> <templates:row verticalAlignColumns="center"> <templates:column width="2"> <standard:icon library="fontawesome" name="phone-volume-solid" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> <a href="tel: 123 456 789">Call Us</a> </templates:column> <templates:column width="2"> <standard:icon library="fontawesome" name="envelope" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> <a href="mailto:info@domain.com">Email Us</a> </templates:column> <templates:column width="7"> <standard:icon library="fontawesome" name="clock-solid" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> Mon - Fri: 9:00 - 19:00 </templates:column> <templates:column width="3"> <templates:sociallinks icon-width="33px" icon-height="33px" variant="Square" size="3" facebook="#" twitter="#" linkedin="#" instagram="#" youtube="#" color="#151414" /> </templates:column> </templates:row> </templates:section> <hr style="margin: 0" /> <templates:header variant="YinYang" maxlogowidth="200px" maxlogoheight="100px" logo="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" bgcolor="#ffffff" contentsize="md" navfontcolor="#ffffff" navbgcolor="#242424"> <navigation:primary includestyles="true" autopopulatelevel="1" classlicurrent="s8-navigationPrimaryLI-current" rootpage="/" /> <templates:button headerposition="primary" variant="Pulse" bgcolor="#151414" padding="10" borderRadius="0" color="#ffffff" href="/community/login">LOGIN</templates:button> </templates:header>