Navbar actions next to breadcrumbs

[peterpeterparker]

NextJS documentation (example) shows an action and a dropdown in the navbar next to the breadcrumbs.

Does anyone know if there's a way to replicate this in Docusaurus? Are there any built-in features, or would it require swizzling a few components? If so, which component would you use for the popover?

[slorber]

We don't have any popover component in our theme currently, but you could provide one yourself and swizzle the breadcrumb component to display actions on the right. The closest you could use is our navbar dropdown.

To get the link to a Markdown file, you can probably hack the "editUrl" feature to compute the raw Markdown file link from it:

• Before: https://github.com/facebook/docusaurus/edit/main/website/docs/introduction.mdx
• After: https://raw.githubusercontent.com/facebook/docusaurus/refs/heads/main/website/docs/introduction.mdx

Currently, we don't embed the source Markdown files on your static deployment, so you'd rather link to GitHub. However, you can configure your site to do so with the staticDirectories config.

[peterpeterparker]

Thanks for the answer!

Gotcha, I might give it a try by building something myself by swizzling the breadcrumb.

Are such features — both the popover and the ability to add actions in the navbar — part of the Docusaurus roadmap?

Regarding Markdown, it's not the source markdown but rather the rendered version that's available next to each route, as discussed in the llms.txt issue.

[slorber]

We'll likely consider such UX as an extension to support LLMS better, similar to llms.txt issue.

Feel free to open a dedicated issue to propose a feature design in terms of API, UX/UI, and how it should work (in particular when dealing with MDX and embedded components)

[peterpeterparker]

I implemented the feature by swizzling the breadcrumb component and adding my own action and popover. For this component in particular, I didn’t build a new one from scratch instead, I reused the existing dropdown CSS classes. That way, it looks and feels exactly like part of the kit.

For the curious, you can see it in action for example on this page of Juno's docs: https://juno.build/docs/intro

Here’s the PR: junobuild/docs#511

Screenshots: