mirror of https://github.com/vuejs/vitepress
parent
de765296ef
commit
31a725d067
@ -0,0 +1,159 @@
|
||||
# Sidebar
|
||||
|
||||
The sidebar is the main navigation block for your documentation. You can configure the sidebar menu in `themeConfig.sidebar`.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Guide',
|
||||
items: [
|
||||
{ text: 'Introduction', link: '/introduction' },
|
||||
{ text: 'Getting Started', link: '/getting-started' },
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## The Basics
|
||||
|
||||
The simplest form of the sidebar menu is passing in a single array of links. The first level item defines the "section" for the sidebar. It should contain `text`, which is the title of the section, and `items` which are the actual navigation links.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Section Title A',
|
||||
items: [
|
||||
{ text: 'Item A', link: '/item-a' },
|
||||
{ text: 'Item B', link: '/item-b' },
|
||||
...
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Section Title B',
|
||||
items: [
|
||||
{ text: 'Item C', link: '/item-c' },
|
||||
{ text: 'Item D', link: '/item-d' },
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Each `link` should specify the path to the actual file starting with `/`. If you add trailing slash to the end of link, it will show `index.md` of the corresponding directory.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Guide',
|
||||
items: [
|
||||
// This shows `/guide/index.md` page.
|
||||
{ text: 'Introduction', link: '/guide/' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Multiple Sidebars
|
||||
|
||||
You may show different sidebar depending on the page path. For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and `Config` page.
|
||||
|
||||
To do so, first organize your pages into directories for each desired section:
|
||||
|
||||
```
|
||||
.
|
||||
├─ guide/
|
||||
│ ├─ index.md
|
||||
│ ├─ one.md
|
||||
│ └─ two.md
|
||||
└─ config/
|
||||
├─ index.md
|
||||
├─ three.md
|
||||
└─ four.md
|
||||
```
|
||||
|
||||
Then, update your configuration to define your sidebar for each section. This time, you should pass an object instead of an array.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: {
|
||||
// This sidebar gets displayed when user is
|
||||
// under `guide` directory.
|
||||
'/guide/': {
|
||||
text: 'Guide',
|
||||
items: [
|
||||
// This shows `/guide/index.md` page.
|
||||
{ text: 'Index', link: '/guide/' }, // /guide/index.md
|
||||
{ text: 'One', link: '/guide/one' }, // /guide/one.md
|
||||
{ text: 'Two', link: '/guide/two' } // /guide/two.md
|
||||
]
|
||||
},
|
||||
|
||||
// This sidebar gets displayed when user is
|
||||
// under `config` directory.
|
||||
'/config/': {
|
||||
text: 'Config',
|
||||
items: [
|
||||
// This shows `/guide/index.md` page.
|
||||
{ text: 'Index', link: '/config/' }, // /config/index.mdasdfasdfasdfasdfaf
|
||||
{ text: 'Three', link: '/config/three' }, // /config/three.md
|
||||
{ text: 'Four', link: '/config/four' } // /config/four.md
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Collapsible Sidebar Groups
|
||||
|
||||
By adding `collapsible` option to the sidebar group, it shows a toggle button to hide/show each section.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Section Title A',
|
||||
collapsible: true,
|
||||
items: [...]
|
||||
},
|
||||
{
|
||||
text: 'Section Title B',
|
||||
collapsible: true,
|
||||
items: [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
All sections are "open" by default. If you would like them to be "closed" on intial page load, set `collapsed` option to `true`.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Section Title A',
|
||||
collapsible: true,
|
||||
collapsed: true,
|
||||
items: [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
Loading…
Reference in new issue