CODEWITHSUNDEEP
reactjsdocusaurus
Kevin Kihata
Kevin Kihata

Reputation: 201

Docusaurus 2 How to add custom react component in navbar

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 ?

Upvotes: 6

Views: 2848

Answers (2)

Azure562
Azure562

Reputation: 89

2022 Update:

The Docusaurus team acknowledged the issue and documented a work around until they solve the issue.

The temporary workaround works well. It's documentation can be found in the GitHub Issue:

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

Temporary recommended workaround

Until we have first-class support and a convenient API to support this, here's the recommended way to add custom navbar items to your site (see also #7231)

Create a file in src/theme/NavbarItem/ComponentTypes.js to add a custom navbar item type to the existing mapping:

import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
import MyAwesomeNavbarItem from '@site/src/components/NavbarItems/MyAwesomeNavbarItem';

export default {
  ...ComponentTypes,
  'custom-myAwesomeNavbarItem': MyAwesomeNavbarItem,
};

Use it in your config:

module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'custom-myAwesomeNavbarItem', 
          position: "left",
          itemProp: 44, 
          anotherProp: "xyz"
        },
        //... other navbar items
      ]
    }
  }
}

Note: using the custom- prefix is important: the config validation schema will only allow item types with this prefix.

Upvotes: 2

stephancasas
stephancasas

Reputation: 2128

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.

Upvotes: 1

Related Questions