A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too!
npm install astro-navigationA plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs and next/previous pagination too!
> Full docs coming soon!
This packages adds three components useful for building hierarchical navigation in Astro. Just write your Markdown and MDX pages in src/content/pages and you're all set!
builds a sorted hierarchical navigation menu, adds an SEO-friendly breadcrumb list for the current page, and adds next/previous navigation links.
componentThis is the main component, building the HTML for a sorted navigation menu. Include a bit of frontmatter on each .md or .mdx page and the component will handle sorting and nesting pages automatically.
The component will build the list itself but leaves rendering a element to your app.
To build the menu, the component:
1. uses import.meta.glob to find all .md and .mdx files in /src/content/pages
2. filters down to include only the files that include navigation.order frontmatter
3. uses file-based routing similar to Astro's /src/pages directory to sort and nest pages in the menu
``
---
import Navigation from 'astro-navigation'
---
`
componentThe pagination component will build next/previous links, if available.
`
---
import { Pagination } from 'astro-navigation'
---