examples/navigation/src/components/complex-menu.js
import React from "react"
import { useStaticQuery, graphql, Link } from "gatsby"
const ComplexMenu = () => {
const data = useStaticQuery(graphql`
{
kontentItemNavigationItem(
system: { codename: { eq: "website_root_navigation" } }
) {
url
elements {
title {
value
}
subitems {
value {
... on kontent_item_navigation_item {
url
elements {
title {
value
}
subitems {
value {
... on kontent_item_navigation_item {
url
elements {
title {
value
}
subitems {
value {
... on kontent_item_navigation_item {
url
elements {
title {
value
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
`)
const rootMenu = data.kontentItemNavigationItem
const constructMenu = menuItem => {
const url = menuItem.url
const title = menuItem.elements.title.value
const itemHtml = (
<li key={url}>
<Link to={url}>{title}</Link>
</li>
)
if (!menuItem.elements.subitems) {
return itemHtml
} else {
const subMenu = menuItem.elements.subitems.value.map(item =>
constructMenu(item)
)
return [itemHtml, <ul key={`submenu-${url}`}>{subMenu}</ul>]
}
}
return (
<nav>
<ul>{constructMenu(rootMenu)}</ul>
</nav>
)
}
export default ComplexMenu