Skip to content

Instantly share code, notes, and snippets.

@mvhoute
Created October 17, 2019 11:31
Show Gist options
  • Save mvhoute/71576d64ddc2070cf9263be92f18d79f to your computer and use it in GitHub Desktop.
Save mvhoute/71576d64ddc2070cf9263be92f18d79f to your computer and use it in GitHub Desktop.
Navigation component to build the navigation with data from Kentico Kontent
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} />}
/>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment