Docusaurus 2 How to add custom react component in navbar

Question

From the docusaurus docs, the navbar items can only have certain types like link, dropdown and search.

How do I add custom buttons like if I want to add login button ?

Answer 1

This would really depend on the type of functionality you're wanting to see out of the item you add to the navbar, but the development patterns should be similar across various implementations.

If you're trying to trigger something like a login modal when the user clicks your custom button, you could specify the following in docusaurus.config.js:

module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          href: '#login',
          label: 'Login'
        }
      ]
    }
  },
  scripts: [
    'https://yourdomain.com/customscript.js'
  ]
};

Then in a script, customscript.js, you could include the following:

document.querySelector('[href="#login"]')
  .addEventListener('click', () => {
    console.log('Login button clicked.');
  });

Docusaurus requires that either href or to is given on each navbar item, so that's why I chose the weird selector, but if you wished, you could also specify className on the item, and then use that as a selector too. If you want the item to be something other than a link, you could set the outerHTML in your custom script or use replaceWith().

Keep in-mind that depending on the way your site's routing is configured, you may need to re-apply the logic in your custom script if the link node is re-written to the DOM by React.

As far as I know, there isn't really a perfect way to accomplish this at the moment, but v2 is also still in development, so the plugin exposures are getting better with each release.

Answer 2

The temporary workaround works well

https://github.com/facebook/docusaurus/issues/7227