Benefits of JavaScript Template Literals - Time to Hack; Read more at http://bit.ly/2ld9xYD

templateLiterals.js

const topLevel = [
  { label: 'Home', url: '/home' },
  { label: 'Products', url: '/products' },
  { label: 'Services', url: '/services' },
  { label: 'About', url: '/about-us' },
  { label: 'Contact', url: '/contact-us' },
];

const social = [
  { label: '<i class="fa fa-facebook-square"></i>', url: 'https://facebook.com/time2hack' },
  { label: '<i class="fa fa-twitter-square"></i>', url: 'https://twitter.com/time2hack' },
  { label: '<i class="fa fa-google-plus-square"></i>', url: 'https://plus.google.com/+Time2hack' },
]

const menu = (menuData) => `
<ul class="nav">
  ${menuData.map(item => `
    <li class="nav-item">
      <a class="nav-link" href="${item.url}">${item.label}</a>
    </li>
  `)}
</ul>
`;


document.querySelector('body > header').innerHTML += menu(topLevel);
document.querySelector('body > footer').innerHTML += menu(social);