I am writing a Nextra Docs page for an API documentation. On the left side is the Nextra "navbar" Component that usually has links to the single .mdx pages of the documentation.
However in my case, I would like to have one single page for the whole API documentation and add anchor tags to the navbar Component, instead of using links to the single pages. This way the user just scrolls down a single page and uses the anchor tags to skip to desired sections.
Ideally i would like to see all relevant anchor tags below "Overview" in the screenshot, preferably being able to nest them in "subfolders" which contain other anchor tags.
I had no problems creating such a navigation with single .mdx files and using the '_meta.js' file to arrange them and rename them, however this does not work with anchor tags.
Any ideas on how to solve this?
This is my current code:
layout.jsx
import { Footer, Layout, Navbar } from 'nextra-theme-docs'
import { Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-docs/style.css'
export const metadata = {
// Define your metadata here
// For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
}
const navbar = (
API Documentation}
// ... Your additional navbar options
/>
)
const footer =
export default async function RootLayout({ children }) {
return (
{/* Your additional tags should be passed as `children` of `` element */}
{children}
)
}
_meta.js
export default {
index: 'Overview',
// You can use JSX elements to change the look of titles in the sidebar, e.g. insert icons
}
// Custom component for italicized text
function Italic({ children, ...props }) {
return {children}
}
next.config.js
// next.config.js
import nextra from 'nextra'
const withNextra = nextra({
})
export default withNextra()
This is my current project structure, I am using the app router.