NavBar

Mr.Hope ... 2020-1-27 Layout
  • Navbar
  • Layout
About 9 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.

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

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.

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

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:

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

# 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.

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.

# Demo

Configuration of this documentation
Last update: June 7, 2022 11:25
Contributors: Mr.Hope , Mr.Hope