Page header

Header is a mandatory Turbo page element set in the header tag. It can contain a heading, a menu, a preview image, and a navigation link.

<header>
    <h1>Lorem Ipsum</h1>
    <h2>Subheading</h2>
    <figure>
        <img src="https://clck.ru/FFAuR"/>
    </figure>
    <menu>
        <a href="http://example.com/category/page1.html">Menu item 1</a>
        <a href="http://example.com/category/page2.html">Menu item 2</a>
    </menu>
    <div data-block="breadcrumblist">
        <a href="http://example.com/">Home page</a>
        <a href="http://example.com/category">Category page</a>
        <a href="http://example.com/category/page1.html">Page 1</a>
    </div>
</header>
Copied to clipboard
h1 *

Page heading.

h2

Subtitle.

figure
The element used for generating a preview in the header. Can be used for generating a picture with caption.
img
The src attribute must contain the image URL. JPEG, PNG, GIF formats are supported.
menu

Navigation menu.

div

The block used for creating a navigation link. Set by the div element with the data-block="breadcrumblist" attribute.

Required

Menu

To place the menu on a Turbo page, use the menu block in the header element:

<header>
    ...
    <menu>
        <a href="http://example.com/category/page1.html">Menu item 1</a>
        <a href="http://example.com/category/page2.html">Menu item 2</a>
        ...
    </menu>
</header>
Copied to clipboard
menu

Navigation menu.

a

Menu item. The href attribute must contain the site page link.

Navigation link

To place a navigation link on a Turbo page, use the div block with the data-block="breadcrumblist" attribute:
<header>
    ...
    <div data-block="breadcrumblist">
        <a href="http://example.com/">Home page</a>
        <a href="http://example.com/category">Category page</a>
        <a href="http://example.com/category/page1.html">Page 1</a>
    </div>
</header>
Copied to clipboard
div

The block used for creating a navigation link. Set by the div element with the data-block="breadcrumblist" attribute.

a

Breadcrumb element. The href attribute must contain the site page link.