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.jsfile in our project's root directory.Locating the
themeConfigobject within the file. It should be defined as follows:docusaurus.config.jsthemeConfig: {
// Your theme configuration goes here
},Finding the
navbarproperty within thethemeConfigobject. 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
itemsproperty within the navbar object. This property is an array of objects that define the links in the navbar.To add the
Docslabel to thenavbar, we need to create a new object in theitemsarray with the following properties:docusaurus.config.js{
type: 'doc',
docId: 'about-tcetopensource',
sidebarId: 'docs',
position: 'left',
label: 'Docs',
},To add the
Bloglabel to thenavbar, we need to create a new object in theitemsarray with the following properties:docusaurus.config.js{
to: '/blog',
label: 'Blog',
position: 'left',
},Saving the changes to our
docusaurus.config.jsfile.
Now that we had added items to our navbar, the next step was to start adding links to connect our pages.