# VuePress Tutorial 7 - Navbar Logo and Links
# What is a Navbar?
In this tutorial we'll be discussing how to configure the navbar by using the options exposed by the default theme (opens new window). A navbar is used to provide users with a quick and easy way to navigate to the main pages of a site. Most sites display the navbar on most or all of the pages, so it's generally designed to be a global component which allows it to be easily shown on all pages.
The navbar for a site made with VuePress (opens new window) can consist of a logo, a site title, a search box, internal links, languages the site can be translated to, and external links. Depending on how you want to configure your navbar your site can have all or some of these options. We'll be discussing how to configure the logo, site title, internal links, and external links. We'll also discuss how to disable the navbar globally as well as locally for specific pages.
Take a look at the navbar on this page to see what we'll be designing for the Code Monkeys Blog. To see another example you can check out the VuePress (opens new window) site navbar as well.
Using a Custom Theme
Since the options being used for the navbar are provided by the default theme (opens new window), they may be different if you're using a custom theme (opens new window).
Make sure you start the local development server which should be running at http://localhost:8080/ (opens new window) to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.
# Navbar Logo and Site Title
The navbar logo is used to brand your site, and it provides a link to the homepage. The image we're going to be using for the navbar is the Code Monkeys head and shoulders logo. We're going to be adding the image which is named code-monkeys-head-and-shoulders-logo.png to the code-monkeys-logos directory.
The site title in the navbar also provides a link to the homepage, and it's being set by the value of the title property in the config.js file which we set up in a previous tutorial.
After adding the image, the directory structure for your site should now look something like this:
.
├── .yarn (Optional)
│ ├── releases
│ │ └── yarn-1.22.17.cjs
├── docs
│ ├── .vuepress
│ │ ├── public
│ │ │ ├── images
│ │ │ │ ├── code-monkeys-logos
│ │ │ │ │ ├── code-monkeys-full-logo.png
│ │ │ │ │ └── code-monkeys-head-and-shoulders-logo.png
│ │ └── config.js
│ └── README.md
├── node_modules
├── .gitattributes (Optional)
├── .gitignore
├── .yarnrc (Optional)
├── LICENSE
├── package.json
├── README.md
└── yarn.lock
If the directory structure is confusing you, then be sure to take a look at the Adding an Image section from the previous tutorial where it's described in more detail. That section also contains links to resources for creating, editing, and compressing images and for coming up with color schemes and palettes for your site.
Here's the Code Monkeys head and shoulders logo:
You can download the logo right here from your browser, and it will also be in the tutorial-7 branch of the code-monkeys-blog-tutorials (opens new window) repository.
After adding the image to the site, we can reference it in the config.js file as follows:
Notice you don't need to include .vuepress/public in the path to the navbar logo because whenever you reference assets stored in the public directory it's added automatically.
Also, notice the value of the site title is being set here by using the title property.
Here's what the HTML looks like after adding the navbar logo:
You should now see the navbar logo in the upper left of the page.
# Navbar Links
To add links to the navbar other than to the homepage we need to add a nav property to the themeConfig object. The nav property expects an array of navbar link objects. We're going to start by adding internal links.
# Internal Links
An internal link is a link that points to another section of the same page or to another page on the same site or domain.
To add an internal link you need to add { text: 'Link Name', link: '/path-to-page/' } to the nav property where the text defines the name of the link in the navbar and link defines the path to the preferred page.
For our site we're going to add the following internal links: Topics, Posts, Resources, and Donate.
Here's what the config.js file looks like after adding the internal links:
Here's what the HTML looks like after adding the internal links:
Your navbar should now have Topics, Posts, Resources, and Donate links to the right of the search box.
404 When Clicking the Links
If you click the links they will show the 404 layout because we haven't set up the pages for Topics, Posts, Resources, and Donate yet. In future tutorials we'll create these pages which will fix these issues.
# External Links
An external link is a link that points to a page outside of the same site or domain.
Adding an external link is the same as adding an internal link except the value provided to the link property is a URL to an external site.
External links automatically get target="_blank" rel="noopener noreferrer" attributes added to the <a> tag. The target attribute specifies where to open the linked document, and the rel attribute specifies the relationship between the current document and the linked document.
These attributes are used to prevent a vulnerability known as reverse tabnabbing (opens new window) which can happen when a user clicks on an external link. All major browsers have fixed this vulnerability, but you can still include these attributes in case a user is using a browser without this security update.
You can also customize the values for the target and rel attributes by specifying them as properties in the external link. You can disable the rel attribute for a link by setting it like this rel: false.
For example, we could add an external link to the code-monkeys-blog (opens new window) repository on our site with custom values for target and rel.
Here's what the config.js file looks like after adding the external link:
Here's what the HTML looks like after adding the external link:
No External Link in Navbar
Currently, the Code Monkeys Blog doesn't include an external link in the navbar, but in the future one may be added for the code-monkeys-blog (opens new window) repository using the default values for external links mentioned above.
# Dropdown Menus
The links in the navbar can also be dropdown menus if an items property which expects an array of navbar link objects is used instead of just a link property.
For example, the Posts link we made earlier can be turned into a dropdown menu containing links to pages for All Posts and for posts By Topic.
Here's what the config.js file looks like after turning the Posts link into a dropdown menu:
Here's what the HTML looks like after adding a dropdown menu:
Your navbar should now have a Posts dropdown menu containing All Posts and By Topic links.
# Dropdown Menu Subgroups
It's also possible to make a dropdown menu with subgroups where a label is used to group a list of links. This is done by using the items property which expects an array of navbar link objects instead of using just a link property for a dropdown menu entry.
For example, the By Topic link we made earlier can be turned into a subgroup containing links to posts filtered by main topics. Currently, the blog consists of three main topics LeetCode, Node.js, and VuePress, so we'll add each of these as an entry to the By Topic subgroup in our dropdown menu.
Here's what the config.js file looks like after turning the By Topic link in the dropdown menu into a subgroup:
Final config.js File
This is how the config.js file should look at the end of this tutorial if you're following along with the building of the blog.
Here's what the HTML looks like after adding a subgroup to the dropdown menu:
Your navbar should now have a By Topic subgroup in the dropdown menu containing these links LeetCode, Node.js, and VuePress.
To add more links to the By Topic subgroup all you need to do is add another element into its items array.
404 Reminder When Clicking the Links
Clicking the links will show the 404 layout because we haven't set up the pages for the navbar links except for the homepage. In future tutorials we'll create these pages which will fix these issues.
# Disabling the Navbar
You can disable the navbar globally if you prefer to not have a navbar for your site. You also have the option to disable the navbar locally for specific pages. We'll demonstrate how to do each of these below.
# Globally
To disable the navbar globally add the following to your config.js file:
The navbar property is a predefined variable provided by the default theme (opens new window). Check out Predefined Variables Powered By Default Theme (opens new window) for a list of the predefined variables.
# Locally
To disable the navbar locally for a specific page you can add the following to the page's frontmatter:
# Next Steps
In the next tutorial we'll begin the development of the Footer component which will stick to the bottom of the page and consist of social media icons and a made by message.