vuepress-theme-hope

NavBar

Mr.Hope ... Layout
  • Navbar
  • Layout
 About 3 min

# NavBar

# Introduction

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 navigation bar text, link navigation bar link, and icon navigation bar icon:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: "Home", link: "/", icon: "home" },
      { text: "Guide", link: "/guide/", icon: "info" },
      { text: "External", link: "https://google.com", icon: "markdown" },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10

These links can also be dropdown menus if you provide an array of items instead of a link:

module.exports = {
  themeConfig: {
    nav: [
      {
        text: "Languages",
        ariaLabel: "Language Menu",
        items: [
          { text: "Chinese", link: "/language/chinese/" },
          { text: "Japanese", link: "/language/japanese/" },
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

You can also have sub groups inside a dropdown by having nested items:

module.exports = {
  themeConfig: {
    nav: [
      {
        text: "Languages",
        items: [
          {
            text: "Group1",
            items: [
              /*  */
            ],
          },
          {
            text: "Group2",
            items: [
              /*  */
            ],
          },
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

In the navigation bar grouping, you can add a prefix field to add a prefix to each submenu link:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      {
        text: "Basic",
        icon: "info",
        prefix: "/basic/",
        items: [
          { text: "Markdown", link: "markdown", icon: "markdown" },
          { text: "VuePress", link: "vuepress/", icon: "vue" },
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Disable the Navbar

To disable the navbar globally, use themeConfig.navbar:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    navbar: false,
  },
};
1
2
3
4
5
6

You can disable the navbar for a specific page via YAML front matter:

---
navbar: false
---
1
2
3
4

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.

// .vuepress/config.js
module.exports = {
  themeConfig: {
    logo: "/logo.png",
  },
};
1
2
3
4
5
6

You can disable the built-in search box with themeConfig.search: false, and customize the number of suggestions will be shown with themeConfig.searchMaxSuggestions:

module.exports = {
  themeConfig: {
    search: false,
    searchMaxSuggestions: 10,
  },
};
1
2
3
4
5
6

You can also disable the built-in search box for individual pages with YAML front matter:

---
search: false
---
1
2
3
4

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:

module.exports = {
  themeConfig: {
    algolia: {
      apiKey: "<API_KEY>",
      indexName: "<INDEX_NAME>",
    },
  },
};
1
2
3
4
5
6
7
8

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:

module.exports = {
  themeConfig: {
    searchPlaceholder: "Search...",
  },
};
1
2
3
4
5

Providing themeConfig.repo auto generates a GitHub link in the navbar and "Edit this page" links at the bottom of each page.

// .vuepress/config.js
module.exports = {
  themeConfig: {
    // Assumes GitHub. Can also be a full GitLab url.
    repo: "vuejs/vuepress",
    // Customising the header label
    // Defaults to "GitHub"/"GitLab"/"Bitbucket" depending on `themeConfig.repo`
    repoLabel: "Contribute!",
    // Whether to display repo link, default is `true`
    repoDisplay: true,

    // Optional options for generating "Edit this page" link

    // if your docs are in a different repo from your main project:
    docsRepo: "vuejs/vuepress",
    // if your docs are not at the root of the repo:
    docsDir: "docs",
    // if your docs are in a specific branch (defaults to 'master'):
    docsBranch: "master",
    // defaults to false, set to true to enable
    editLinks: true,
    // default value is true. Allows to hide next page links on all pages
    nextLinks: false,
    // default value is true. Allows to hide prev page links on all pages
    prevLinks: false,
    // custom text for edit link. Defaults to "Edit this page"
    editLinkText: "Help us improve this page!",
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

You can overwrite the following properties on specific pages via YAML front matter:

---
editLink: false # Will overwrite 'editLinks' from themeConfig
---
1
2
3
4

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

# Demo




 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


















// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      // add icon field to each item to display icon
      { text: "Home", link: "/", icon: "home" },
      { text: "Guide", link: "/guide/", icon: "creative" },
      { text: "Config", link: "/config/", icon: "config" },
      {
        text: "Basic",
        icon: "info",
        prefix: "/basic/",
        items: [
          { text: "Markdown", link: "markdown/", icon: "markdown" },
          { text: "VuePress", link: "/vuepress/", icon: "vue" },
        ],
      },
      {
        text: "Project",
        icon: "info",
        items: [
          {
            text: "Changelog",
            link:
              "https://github.com/Mister-Hope/vuepress-theme-hope/blob/v1/CHANGELOG.md",
          },
          {
            text: "Repo",
            link: "https://github.com/mister-hope/vuepress-theme-hope",
          },
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Sidebar

MIT Licensed | Copyright © 2019-present Mr.Hope