Nav​

The Nav is the navigation bar displayed on top of the page. It contains the site title, global menu links, etc.

Site Title and Logo​

By default, nav shows the title of the site referencingconfig.title value. If you would like to change what's displayed on nav, you may define custom text inthemeConfig.siteTitle option.

export default {  themeConfig: {    siteTitle:'My Custom Title'  }}

If you have a logo for your site, you can display it by passing in the path to the image. You should place the logo withinpublic directly, and define the absolute path to it.

export default {  themeConfig: {    logo:'/my-logo.svg'  }}

When adding a logo, it gets displayed along with the site title. If your logo is all you need and if you would like to hide the site title text, setfalse to thesiteTitle option.

export default {  themeConfig: {    logo:'/my-logo.svg',    siteTitle:false  }}

You can also pass an object as logo if you want to addalt attribute or customize it based on dark/light mode. ReferthemeConfig.logo for details.

Navigation Links​

You may definethemeConfig.nav option to add links to your nav.

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

Thetext is the actual text displayed in nav, and thelink is the link that will be navigated to when the text is clicked. For the link, set path to the actual file without.md prefix, and always start with/.

Nav links can also be dropdown menus. To do this, setitems key on link option.

export default {  themeConfig: {    nav: [      { text:'Guide', link:'/guide' },      {        text:'Dropdown Menu',        items: [          { text:'Item A', link:'/item-1' },          { text:'Item B', link:'/item-2' },          { text:'Item C', link:'/item-3' }        ]      }    ]  }}

Note that dropdown menu title (Dropdown Menu in the above example) can not havelink property since it becomes a button to open dropdown dialog.

You may further add "sections" to the dropdown menu items as well by passing in more nested items.

export default {  themeConfig: {    nav: [      { text:'Guide', link:'/guide' },      {        text:'Dropdown Menu',        items: [          {            // Title for the section.            text:'Section A Title',            items: [              { text:'Section A Item A', link:'...' },              { text:'Section B Item B', link:'...' }            ]          }        ]      },      {        text:'Dropdown Menu',        items: [          {            // You may also omit the title.            items: [              { text:'Section A Item A', link:'...' },              { text:'Section B Item B', link:'...' }            ]          }        ]      }    ]  }}

Customize link's "active" state​

Nav menu items will be highlighted when the current page is under the matching path. if you would like to customize the path to be matched, defineactiveMatch property and regex as a string value.

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

Customize link's "target" and "rel" attributes​

By default, VitePress automatically determinestarget andrel attributes based on whether the link is an external link. But if you want, you can customize them too.

export default {  themeConfig: {    nav: [      {        text:'Merchandise',        link:'https://www.thegithubshop.com/',        target:'_self',        rel:'sponsored'      }    ]  }}

Social Links​

RefersocialLinks.

Custom Components​

You can include custom components in the navigation bar by using thecomponent option. Thecomponent key should be the Vue component name, and must be registered globally usingTheme.enhanceApp.

export default {  themeConfig: {    nav: [      {        text:'My Menu',        items: [          {            component:'MyCustomComponent',            // Optional props to pass to the component            props: {              title:'My Custom Component'            }          }        ]      },      {        component:'AnotherCustomComponent'      }    ]  }}

Then, you need to register the component globally:

import DefaultThemefrom 'vitepress/theme'import MyCustomComponentfrom './components/MyCustomComponent.vue'import AnotherCustomComponentfrom './components/AnotherCustomComponent.vue'/**@type {import('vitepress').Theme} */export default {  extends: DefaultTheme,  enhanceApp({app }) {    app.component('MyCustomComponent', MyCustomComponent)    app.component('AnotherCustomComponent', AnotherCustomComponent)  }}

Your component will be rendered in the navigation bar. VitePress will provide the following additional props to the component:

• screenMenu: an optional boolean indicating whether the component is inside mobile navigation menu

You can check an example in the e2e testshere.