Skip to main content

1️⃣ Adding a New Navbar Item in Docusaurus

Docusaurus allows you to customize the navigation bar to include links to pages, documentation, or external resources. This guide explains how to create a new navbar item step by step.

Editing the Sidebars File​

Locate and open the sidebars.js file. Then, define a sidebar with your desired name:

sidebars.js
module.exports = {
  tutorialSidebar: [{type: 'autogenerated', dirName: 'tutorials'}],
  /* yourSidebar is the sidebarId that will be referenced
  in the docusaurus.config.js file */
  yourSidebar: [{type: 'autogenerated', dirName: 'your_dir'}],
};

Editing the Configuration File​

Open the docusaurus.config.js file. Find the themeConfig section and under navbar.items, add a new object representing your navbar item.

docusaurus.config.js
themeConfig:
({
    ...
    items: [
        {
        type: 'docSidebar',
        sidebarId: 'yourSidebar',
        position: 'left',
        label: 'your-sidebar-name',
        },
    ]
    ...
})
tip

You may link external links or static pages to your newly added navbar item too!

External Link

{
  href: 'https://example.com',
  label: 'External Link',
  position: 'right',
}

Static Pages

{
  to: '/yourPage',
  label: 'Your Page',
  position: 'left',
}

Save your changes, restart the Docusaurus server and reopen your site to see your new navbar item appearing!