# 导航栏重要
导航栏就是处在页面上方的组件，通过点击不同的按钮来进入不同的栏目。
关于导航栏和侧边栏的配置，都在docs/.vuepress/config.js文件中进行，它是一个全局配置文件，项目的很多相关设置都写在里面。
# 导航栏配置
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '教程介绍', link: '/guide/' },
{ text: '环境配置', link: '/environment/' },
{ text: '基础教程', link: '/course/' },
{ text: '网站部署', link: '/deployment/' },
{ text: 'Github', link: 'https://github.com/C01day/vuepress-teach' }
],
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
这是本篇博客的导航栏配置，都写在themeConfig.nav里。text代表显示的文字，link表示跳转的路径。
上节内容中提到过，路径为/时表示的真实路径为 docs 文件夹里的README.md。因此点击首页时，跳转到的页面是 docs 下的README.md文件。
提示
之后所提到的路径都在 docs 文件夹下，不再重复说明。
知道这个知识点以后，可以举一反三。我们可以看到，教程介绍的link为/guide/，可以推断出真实路径为/guide/README.md。因此点击教程介绍时，跳转到的页面是guide文件夹中的 README.md 文件。
# 导航栏下拉列表
当我们提供一个items数组时，可以将导航栏中的按钮设置为下拉列表：
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
{
text: '语言',
ariaLabel: '语言菜单',
items: [
{ text: '中文', link: '/language/chinese/' },
{ text: '日语', link: '/language/japanese/' }
]
}
],
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
也就是说，点开语言按钮，出现中文和日语两个选项。
提示
ariaLabel是标签的描述，可以不要。
# 下拉列表分组
同时，也可以在下拉列表中分组，让下拉列表更加符合逻辑。方法就是在items里面嵌套items。
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
{
text: '语言',
ariaLabel: '语言菜单',
items: [
{
text: '亚洲',
items: [
{ text: '中文', link: '/language/chinese/' },
{ text: '日语', link: '/language/japanese/' }
]
},
{
text: '欧洲',
items: [
{ text: '英语', link: '/language/english/' },
{ text: '法语', link: '/language/french/' }
]
},
]
}
],
}
}
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
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
点开语言按钮，出现四个选项，其中中文 日语按钮分在亚洲组，英语 法语按钮分在欧洲组。
