NavBar
Mr.Hope 2020-1-27 About 8 min
The Navbar may contain your site title, Search Box, Navbar Links, Languages (opens new window) and Repository Link, they all depend on your configuration.
# Navbar Links
You can add links to the navbar via themeConfig.nav.
The basic configuration items are text (i.e.: navigation bar text), link (i.e.: navigation bar link), and icon (i.e.: navigation bar icon):
These links can also be dropdown menus if you provide an array of items instead of a link:
In most cases, the grouped items in the navigation bar belong to the same category and will be placed in the same subdirectory, and they have the same path prefix. To simplify the configuration, you can add the prefix field to add a prefix to each sub-link in the group:
You can also have sub groups inside a dropdown by having nested items:
Demo
# Disable the Navbar
To disable the navbar globally, use themeConfig.navbar:
You can disable the navbar for a specific page via YAML front matter:
---
navbar: false
---
1
2
3
2
3
# Navigation bar icon
You can use themeConfig.logo to configure the icons of the navigation bar, please fill in the absolute path.
After configuring the icon, the icon will be displayed on the navigation bar instead of the previous site name on the mobile view.
Tips
You can set themeConfig.darkLogo to display another logo in dark mode.
# Search Box
# Built-in Search
You can disable the built-in search box with themeConfig.search: false, and customize the number of suggestions will be shown with themeConfig.searchMaxSuggestions:
You can also disable the built-in search box for individual pages with YAML front matter:
---
search: false
---
1
2
3
2
3
Tips
Built-in Search only builds index from the title, h2 and h3 headers, if you need full text search, you can use Algolia DocSearch.
# Algolia DocSearch
The themeConfig.algolia option allows you to use Algolia DocSearch (opens new window) to replace the simple built-in search. To enable it, you need to provide at least apiKey and indexName:
Note
Unlike the built-in search engine which works out of the box, Algolia DocSearch (opens new window) requires you to submit your site to them for indexing before it starts working.
For more options, check out Algolia DocSearch’s documentation (opens new window).
# Search Placeholder
You can define a placeholder for the search box by adding the searchPlaceholder attribute:
# Git repository and Edit Links
Providing themeConfig.repo auto generates a GitHub link in the navbar and "Edit this page" links at the bottom of each page.
You can overwrite the following properties on specific pages via YAML front matter:
---
editLink: false # Will overwrite 'editLinks' from themeConfig
---
1
2
3
2
3
# Theme color button
For details, see the Themecolor section.
# Darkmode button
For details, see the Darkmode section.
# Full screen button
For details, see the Full Screen Button section.
# navbarConfig
We provide a navbarConfig Helper function. You can import it from vuepress-theme-hope and wrap your navigation bar configuration to let the editor provide auto-completion and help you verify the navbar configuration.
Tips
When you are spliting VuePress configuration into multiple parts, you can use this helper function to keep automatic completion and verification.