This component helps you create a navigation tree structure based on an array of JSON objects you provide. This gives you full control and flexibility over what the tree looks like.
While this component mostly works, it is still in beta and should not be considered "production ready". Future version might include breaking changes.
I'm honestly just working on a solution to fit my very specific needs and mistakenly used the astro-component keyword ... which got it listed in the Astro Integration pages and gave this more attention than it deserves right now. But now that it's here, it might actually be of some use to other people as well.
First install the module:
npm install @prosellen/astro-navigationThen inside of an .astro page, import the module, create an array of navigation objects, and pass it to the component inside of the body:
---
import Navigation from '@prosellen/astro-navigation'
// Create an array with (nested) navigation objects
const navigationItems = [
{ url: "/", text: "Home" },
{
url: "/about-us/",
text: "About Us",
children: [
{
url: "/about-us/team/",
text: "Team",
},
],
},
{ url: "/contact/", text: "Contact" },
]
---
<nav>
<Navigation navigationItems={navigationItems} />
</nav>This will render to something like this:
<ul class="navigation-level-1">
<li class="">
<a href="/" class="">Home</a>
</li>
<li class="">
<a href="/about-us/" class="">About Us</a>
<ul class="navigation-level-2">
<li class="">
<a href="/about-us/team/" class="">Team</a>
</li>
</ul>
</li>
<li class="">
<a href="/contact/" class="">Contact</a>
</li>
</ul>const navigationItems = [
{
text: "Home", // The text to display inside the `a` tag
url: "/about-us/", // A unique URL to the page to be used as the `href` attribute
redirect: "/about-us/team/", // (Optional) If set, this is used for the `href` attribute instead of the URL
children: [{ ... }], // (Optional) An array of navigation items for nested navigation
},
...
]<Navigation
navigationItems=(navigationItems) // The array of navigation items
startLevel=1; // Begin rendering the navigation at this level ss
maxLevel=4; // Do not render nesting deeper than this level
/>See the demo pages in the repository for usage examples
