vitepress
vitepress copied to clipboard
vuejs
Allow link on Nav item with children items
Is your feature request related to a problem? Please describe.
Just like sidebar, allow having a link and a dropdown menu at the same time in the nav bar.
Describe the solution you'd like
{
nav: [
{
text: 'Tools',
link: '/tools/README.md',
items: [
{ text: 'Tool1', link: '/tools/tool1.md' },
{ text: 'Tool2', link: '/tools/tool2.md' },
{ text: 'Tool3', link: '/tools/tool3.md' },
],
},
]
}
Describe alternatives you've considered
No response
Additional context
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the docs.
- [X] Read the Contributing Guidelines.
- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.
Do you need it to work for the top-level item too? Like say if we have something like this:
Then do you want the link on "Guide" too? Or just in deeper nesting levels like "Writing"? If latter is the case, then simply something like this should work:
{
text: '',
items: [
{
text: 'Writing',
link: '/foo'
},
{
text: 'Markdown Extensions',
link: '/guide/markdown'
},
{
text: 'Asset Handling',
link: '/guide/asset-handling'
}
]
}
In case you want the first, then there might be some issues, like we will have to change that button to anchor tag and toggle dropdown on hover? (seems weird + might break keyboard nav too -- like will have to open dropdown on focus instead of space/enter as the latter will open the link instead; and toggling on focus will just mean user will have to traverse whole menu to reach the next item or maybe we will need to add arrow left/right + esc handlers there?)
I would say that for keyboard navigation it's fine to keep it like we currently have, i.e. opening the dropdown.
Are there any updates on this issue?
I recently wanted to do something similar for my sidebar. It would be great to add the ability to add links to the dropdown titles, +1 to that.
