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:
Opening the
docusaurus.config.js
file in our project's root directory.Locating the
themeConfig
object within the file. It should be defined as follows:docusaurus.config.jsthemeConfig: {
// Your theme configuration goes here
},Finding the
navbar
property within thethemeConfig
object. This property contains configuration options for the navbar.docusaurus.config.jsnavbar: {
// 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
},Locating the
items
property within the navbar object. This property is an array of objects that define the links in the navbar.To add the
Docs
label to thenavbar
, we need to create a new object in theitems
array with the following properties:docusaurus.config.js{
type: 'doc',
docId: 'about-tcetopensource',
sidebarId: 'docs',
position: 'left',
label: 'Docs',
},To add the
Blog
label to thenavbar
, we need to create a new object in theitems
array with the following properties:docusaurus.config.js{
to: '/blog',
label: 'Blog',
position: 'left',
},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.