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!
This 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 element to your app.
To build the menu, the
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'
---