You can add links to the navbar via
navbar options, it accepts an array.
The easiest way to configure the navbar is to fill in the paths of the page files to be displayed in turn, so that the text, icons and links of the item will be automatically generated from the corresponding files.
You can omit the
.md extension, and paths ending with
/ are inferred as
If you are not satisfied with the page’s icon or feel that the page title is too long, you can configure an object instead. Available configuration items are:
text:: item text
link: item link
icon: item icon (optional)
activeMatch: item active math (optional), support regexp strings
Advanced usage of activeMatch
activeMatch gives you the ability to control whether the path is active, for example you may have the following dropdown:
But you may have multiple folders with files under
/path/. To avoid multiple dropdown items been activated under route starting with
/path/b/, you can set
activeMatch option for the first item with
To display more links, you can group similar links into a dropdown list.
You need use object format and provide the additional
children option to nest links:
In most cases, the grouped items in the navbar 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
To disable the navbar globally, set
navbar: false in theme options:
You can disable the navbar for a specific page via
YAML front matter:
--- navbar: false ---
You can use
logo options to set site logo displayed in navbar.
The logo is displayed on the navbar instead of the previous site name on mobile.
Please fill in an absolute path and place the logo in
You can set
logoDark to display another logo in dark mode.
The theme’s navbar supports I18n, so you can set navbar options mentioned above individually in each language:
Like the default theme,
vuepress-theme-hope brings built-in support for search plugins. You can enable the following plugins according to your own needs. The corresponding search box will automatically appear in the navbar.
For details, please see Feature → Search.
Git Repository and Edit Links
A repo button will appear in navbar if you set
repo in theme options.
You can control whether showing the repository button via
repoDisplay in theme options.
The following three functions are provided:
vuepress-theme-hope allows you to customize navbar layout. You can add components in
right keys under
- Brand: Site Brand
- Links: Navbar links
- Language: Language Switcher
- Search: Search Box
- Outlook: Outlook Popup
- Repo: Project Repo
By default, we are using the following options:
Types and Helpers
vuepress-theme-hope exports the type of navbar as
HopeThemeNavbarConfig, and provides a
navbar helper function. They can provide validation and autocompletion of navbar configuration in TS and JS.
They mainly deal with scenarios when you split your VuePress configuration into multiple parts.