{% load cotton %}
<div class="component-variants">
<h1>Header Component</h1>
{% for variant in variants %}
<div class="component-variant">
<h2 class="variant-title">{{ variant.title }}</h2>
{% cotton header type="{{ variant.type }}" is_megamenu="{{ variant.is_megamenu }}" title="{{ variant.logo_title }}" logo_href="{{ variant.logo_href }}" show_search="{{ variant.show_search }}" %}
{% for item in variant.nav_items %}
{% cotton header.nav-item type="{{ item.type|default:'link' }}" href="{{ item.href }}" text="{{ item.text }}" submenu_id="{{ item.submenu_id }}" is_current="{{ item.is_current }}" %}
{% if item.type == 'dropdown' %}
{% cotton header.nav-submenu id="{{ item.submenu_id }}" is_megamenu="{{ item.submenu_is_megamenu }}" %}
{% for column in item.columns %}
{% cotton header.megamenu-column %}
{% for subitem in column.items %}
{% cotton header.nav-submenu-item href="{{ subitem.href }}" text="{{ subitem.text }}" %}{% endcotton %}
{% endfor %}
{% endcotton %}
{% endfor %}
{% for subitem in item.submenu_items %}
{% cotton header.nav-submenu-item href="{{ subitem.href }}" text="{{ subitem.text }}" %}{% endcotton %}
{% endfor %}
{% endcotton %}
{% endif %}
{% endcotton %}
{% endfor %}
{% if variant.secondary_links %}
{% cotton:slot secondary_links %}
{% for link in variant.secondary_links %}
{% cotton header.secondary-link href="{{ link.href }}" text="{{ link.text }}" %}{% endcotton %}
{% endfor %}
{% endcotton:slot %}
{% endif %}
{% endcotton %}
</div>
{% endfor %}
</div>
name: Header
context:
variants:
- title: "Basic Header"
type: "basic"
logo_title: "Project Title"
logo_href: "#"
show_search: "true"
nav_items:
- text: "Current Section"
type: "dropdown"
is_current: "true"
submenu_id: "basic-nav-section-one"
submenu_items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- text: "Section"
type: "dropdown"
is_current: "false"
submenu_id: "basic-nav-section-two"
submenu_items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- text: "Simple Link"
type: "link"
href: "#"
is_current: "false"
- title: "Basic Header with Megamenu"
type: "basic"
is_megamenu: "true"
logo_title: "Project Title"
logo_href: "#"
show_search: "true"
nav_items:
- text: "Current Section"
type: "dropdown"
is_current: "true"
submenu_id: "basic-mega-nav-section-one"
submenu_is_megamenu: "true"
columns:
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "A very long navigation link that goes onto two lines"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- text: "Section"
type: "dropdown"
is_current: "false"
submenu_id: "basic-mega-nav-section-two"
submenu_is_megamenu: "true"
columns:
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- text: "Simple Link"
type: "link"
href: "#"
is_current: "false"
- title: "Extended Header"
type: "extended"
logo_title: "Project Title"
logo_href: "#"
show_search: "true"
secondary_links:
- href: "#"
text: "Secondary link"
- href: "#"
text: "Another secondary link"
nav_items:
- text: "Current Section"
type: "dropdown"
is_current: "true"
submenu_id: "extended-nav-section-one"
submenu_items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- text: "Section"
type: "dropdown"
is_current: "false"
submenu_id: "extended-nav-section-two"
submenu_items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- text: "Simple Link"
type: "link"
href: "#"
is_current: "false"
- title: "Extended Header with Megamenu"
type: "extended"
logo_title: "Project Title"
logo_href: "#"
show_search: "true"
secondary_links:
- href: "#"
text: "Secondary link"
- href: "#"
text: "Another secondary link"
nav_items:
- text: "Current Section"
type: "dropdown"
is_current: "true"
submenu_id: "extended-mega-nav-section-one"
submenu_is_megamenu: "true"
columns:
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "A very long navigation link that goes onto two lines"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- text: "Section"
type: "dropdown"
is_current: "false"
submenu_id: "extended-mega-nav-section-two"
submenu_is_megamenu: "true"
columns:
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "A very long navigation link that goes onto two lines"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- items:
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- href: "#"
text: "Navigation link"
- text: "Simple Link"
type: "link"
href: "#"
is_current: "false"