Skip to main content

Items in Navbar

Adding items

To add the labels of the Docs and Blog items in the navbar, we will need to modify the items array within the navbar object in the themeConfig object in your docusaurus.config.js file.

Here's how we made those changes:

  1. Opening the docusaurus.config.js file in our project's root directory.

  2. Locating the themeConfig object within the file. It should be defined as follows:

    docusaurus.config.js
        themeConfig: {
    // Your theme configuration goes here
    },
  3. Finding the navbar property within the themeConfig object. This property contains configuration options for the navbar.

    docusaurus.config.js
    navbar: {
    // Other navbar properties go here
    title: 'TCET Open Source',
    logo: {
    alt: 'TCET Open Source Logo',
    src: 'img/logo.png',
    },
    items: [
    {
    // Other navbar properties go here
    },
    ],
    // Other navbar properties go here
    },
  4. Locating the items property within the navbar object. This property is an array of objects that define the links in the navbar.

  5. To add the Docs label to the navbar, we need to create a new object in the items array with the following properties:

    docusaurus.config.js
    {
    type: 'doc',
    docId: 'about-tcetopensource',
    sidebarId: 'docs',
    position: 'left',
    label: 'Docs',
    },
  6. To add the Blog label to the navbar, we need to create a new object in the items array with the following properties:

    docusaurus.config.js
    {
    to: '/blog',
    label: 'Blog',
    position: 'left',
    },
  7. Saving the changes to our docusaurus.config.js file.


Now that we had added items to our navbar, the next step was to start adding links to connect our pages.