Default Theme: Nav

Configure the navigation bar for your VitePress site.

Nav Config

The nav option adds links to the top navigation bar. You may configure it to themeConfig.nav.

export default {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'Config', link: '/config/' },
      { text: 'Changelog', link: 'https://github.com/...' }
    ]
  }
}

Nav Item

A nav item can be a single link or contain a dropdown menu.

Single Link

export default {
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide/' }
    ]
  }
}

Dropdown Menu

export default {
  themeConfig: {
    nav: [
      {
        text: 'Dropdown Menu',
        items: [
          { text: 'Item A', link: '/item-a' },
          { text: 'Item B', link: '/item-b' },
          { text: 'Item C', link: '/item-c' }
        ]
      }
    ]
  }
}

Customize Link's "active" State

Nav menu items will be highlighted when the current page is under the matching path. If you want to customize the path to be matched, define the activeMatch property and regex as a string value.

export default {
  themeConfig: {
    nav: [
      // This link gets active state when the user is
      // on `/config/` path.
      {
        text: 'Config',
        link: '/config/index',
        activeMatch: '/config/'
      }
    ]
  }
}

Nav Groups

You can group nav items by adding a text property to create a section header.

export default {
  themeConfig: {
    nav: [
      {
        text: 'Guide',
        items: [
          {
            // Title for the section.
            text: 'Introduction',
            items: [
              { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
              { text: 'Getting Started', link: '/guide/getting-started' },
              { text: 'Configuration', link: '/guide/configuration' }
            ]
          }
        ]
      },
      {
        text: 'Reference',
        items: [
          {
            text: 'Reference',
            items: [
              { text: 'Site Config', link: '/reference/site-config' },
              { text: 'Frontmatter Config', link: '/reference/frontmatter-config' }
            ]
          }
        ]
      }
    ]
  }
}