^{Global web - web components}

Header with navigation and language switcher

Custom HTML element

<gw-group-nav-header content=""></gw-group-nav-header>

Properties | Name | Type | Description | | ------------- | --------- | ----------------------------- | | content | Object | base64 encoded |

LocationSwitcher The modal for switching market/language can be triggered by applying #location-modal-open to the url. Directly in the browser url or in the dialog of any component with a button/link.

content

{
  "transparency": "solid | translucent | transparent",
  "layout": "floating | full-width",
  "color": "default | inverted",
  "url": "",
  "logo": {
    "default": {
      "src": "",
      "alt": ""
    },
    "inverted": {
      "src": "",
      "alt": ""
    },
    "link": "/"
  },
  "navigationData": {
    "marketData": {
      "name": ""
    },
    "menuItems": [
      {
        "links": [
          {
            "links": [
              {
                "id": "",
                "label": "",
                "url": "",
                "description": ""
              }
            ],
            "id": "",
            "label": "",
            "url": "",
            "description": ""
          }
        ],
        "id": "",
        "label": "",
        "url": "",
        "description": ""
      }
    ],
  "return": ""
  },
  "locationSwitcher": {
    "title": "",
    "text": "",
    "trigger": "",
    "marketDropdown": {
      "title": "",
      "text": ""
    },
    "languageListTitle": "",
    "links": [
      {
        "text": "",
        "url": "",
        "external": false
      }
    ],
    // Translations
    "openDialog": "Open dialog",
    "closeDialog": "Close dialog",
    "locationDialog": "Location dialog",
  },
  "divisionBrandSwitcherData": {
    "visible": true,
    "title": "" // new
    "text": "" // new
    "link": { // new
      "text": ""
      "url": ""
    },
    "logotype": "",
    "image": {// new
      "mobile": {
        "url": "",
        "alt": "",
        "renditions": {
          "blur-up": "",
          "400": "",
          "800": "",
          "1200": "",
          "1600": "",
          "2500": ""
        }
      },
      "desktop": {
        "url": "",
        "alt": "",
        "renditions": {
          "blur-up": "",
          "400": "",
          "800": "",
          "1200": "",
          "1600": "",
          "2500": ""
        }
      },
    }
    "divisions": {
      "title": "",
      "links": [
        {
          "title": "",
          "text": "",
          "link": {
            "url": ""
          }
        }
      ]
    },
    "brands": {
      "links": [
        {
          "logotype": "",
          "url": ""
          "alt": ""
        }
      ],
      "link": { // new
        "text": "" // new
        "url": "" // new
      }
    },

    // Translations
    "openDialog": "Open dialog",
    "closeDialog": "Close dialog",
    "divisionsDialog": "Divisions dialog",
  },
  "topbar": {
    "visible": true,
    "links": [
      {
        "text": "",
        "url": ""
        "external": false
      }
    ]
  },
}

content.url response

{
  "navigationData": {
    "marketData": {
      "name": ""
    }
  },
  "locationSwitcher": {
    "currentMarket": {
      "market": "",
      "languages": [
        {
          "language": "",
          "url": ""
        }
      ]
    },
    "markets": [
      {
        "market": "",
        "languages": [
          {
            "language": "",
            "url": ""
          }
        ]
      }
    ]
  },
  "breadcrumbs": [
    {
      "text": "",
      "url": ""
    },
  ],
  "search": {
    "addSearch": {
      "id": "a4ee0edb87a2540e22448e0aa614e0e4"
    },
    "targetUrl": "http://localhost:3000/search",
    "isMarketHiddenInUrl": false,
    "isLanguageHiddenInUrl": false,

    "showMore": "Show more",
    "showingXofY": "Showing {{current}} of {{max}}",
    "search": "How can we help you?",
    "sitewide": "site wide",
    "viewAll": "View all",
    "noResults": "No results",
    "resetSearchField": "Reset search field"
  }
}

Dependencies @assaabloy/gw-group-vendor @assaabloy/brand-styles