Navigation component to build the navigation with data from Kentico Kontent

navigation.js

import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import NavigationLink from './navigationLink';

const Navigation = ({ data }) => {
  const navItems = data.allKenticoCloudItemNavigationRoot.nodes[0].elements.linked_navigation_items;

  return (
    <nav className="navigation">
      <ul>
        {navItems.map((item, i) => {
          return (
            <li key={i}>
              <NavigationLink {...item} />
            </li>
          );
        })}
      </ul>
    </nav>
  );
};

export default props => (
  <StaticQuery
    query={graphql`
      {
        allKenticoCloudItemNavigationRoot(
          filter: { system: { codename: { eq: "header_menu" } } }
        ) {
          nodes {
            elements {
              linked_navigation_items {
                elements {
                  menu_title {
                    value
                  }
                  external_url {
                    value
                  }
                  linked_item {
                    ... on KenticoCloudItemAboutPage {
                      id
                      elements {
                        url_slug {
                          value
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    `}
    render={data => <Navigation data={data} {...props} />}
  />
);