Allows visitors to view region based content by clicking an area an SVG based map.

Example

---

Macro

{{ navMap({
    src: "/assets/images/nav-maps/dental-regions.svg",
    caption: {
      items: [
        {
          id: "lk",
          url: "#",
          text: "London and Kent, Surrey and Sussex (KSS)"
        },
        {
          id: "me",
          url: "#",
          text: "Midlands and the East"
        },
        {
          id: "nenc",
          url: "#",
          text: "North East and North Cumbria"
        },
        {
          id: "nw",
          url: "#",
          text: "North West"
        },
        {
          id: "sw",
          url: "#",
          text: "South West"
        },
        {
          id: "tvw",
          url: "#",
          text: "Thames Valley and Wessex"
        },
        {
          id: "yh",
          url: "#",
          text: "Yorkshire and the Humber"
        }
      ]
    }
}) }}
  

---

HTML

<figure class="nhsuk-map">
    <figcaption class="nhsuk-map__caption">
      <ul id="regionList">
        <li>
          <a id="lk" href="#"> London and Kent, Surrey and Sussex (KSS) </a>
        </li>
        <li>
          <a id="me" href="#"> Midlands and the East </a>
        </li>
        <li>
          <a id="nenc" href="#" class=""> North East and North Cumbria </a>
        </li>
        <li>
          <a id="nw" href="#"> North West </a>
        </li>
        <li>
          <a id="sw" href="#"> South West </a>
        </li>
        <li>
          <a id="tvw" href="#"> Thames Valley and Wessex </a>
        </li>
        <li>
          <a id="yh" href="#"> Yorkshire and the Humber </a>
        </li>
      </ul>
    </figcaption>
    <object class="nhsuk-map__image" data="/assets/images/nav-maps/dental-regions.svg" type="image/svg+xml" tabindex="-1">
    </object>
</figure>