Meta-navigation

Information

Folder
src/components/template-components/header/meta-navigation

Files

Schema
// src/components/template-components/header/meta-navigation/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header/meta-navigation
additionalProperties: false
properties:
  links:
    type: array
    items:
      url:
        type: string
        format: uri-reference
      label:
        type: string
    required:
      - label
      - url
    tenant:
      type: string
required:
  - links
Mocks
// src/components/template-components/header/meta-navigation/mocks.yaml

links:
  - url: url
    label: Presse
  - url: url
    label: Jobs
  - url: url
    label: Kontakt
Template
// src/components/template-components/header/meta-navigation/meta-navigation.html.twig

<nav class="MetaNavigation u-typo-copy-small{% if class %} {{ class }}{% endif %}">
  <ul class="u-container MetaNavigation-list">
    {% if has_search %}
      <li class="MetaNavigation-item">
        <button class="js-MetaNavigation-searchBarOpenButton MetaNavigation-link--openSearchBar" type="button">
          {% include "@elements/icon/icon.html.twig" with {
            name: "search",
            class: "MetaNavigation-linkIcon"
          } only %}
          Suchen
        </button>
      </li>
    {% endif %}
    {% for item in links %}
      <li class="MetaNavigation-item">
        <a class="MetaNavigation-link" href="{{ item.url }}">{{ item.label }}</a>
      </li>
    {% endfor %}
    {% include "@elements/contrast-switcher/contrast-switcher.html.twig" with {
      class: "MetaNavigation-item MetaNavigation-item--contrastSwitcher",
      variant: variant,
      tag: "li",
    } only %}
  </ul>
</nav>

Variants

default
Open