Default Theme: Prev Next Links
Configure the previous and next page navigation links.
Prev Next Links
You can customize the text of previous and next links. This is helpful when you want to display different text than the inferred page title.
js
export default {
themeConfig: {
docFooter: {
prev: 'Previous page',
next: 'Next page'
}
}
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Frontmatter Config
The prev and next links can be customized using frontmatter:
yaml
---
prev:
text: 'Get Started'
link: '/guide/getting-started'
next:
text: 'Configuration'
link: '/guide/configuration'
---1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Disable Prev Next Links
You can disable prev/next links by setting them to false:
yaml
---
prev: false
next: false
---1
2
3
4
2
3
4
Custom Prev Next Links
You can also set custom prev/next links that don't follow the sidebar structure:
yaml
---
prev:
text: 'Custom Previous'
link: '/custom-prev'
next:
text: 'Custom Next'
link: '/custom-next'
---1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Configuration Options
Global Configuration
js
export default {
themeConfig: {
docFooter: {
prev: 'Previous page',
next: 'Next page'
}
}
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Per-page Configuration
Use frontmatter to override global settings on specific pages:
yaml
---
prev:
text: 'Installation'
link: '/guide/installation'
next:
text: 'Configuration'
link: '/guide/configuration'
---1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Styling
The prev/next links inherit styling from the default theme but can be customized with CSS:
css
.VPDocFooter .prev-next {
/* Custom styles */
}1
2
3
2
3