facebook / facebook/docusaurus
Nested dropdown
- Dominant language
- TypeScript
- Stars
- 66.2k
- Forks
- 10k
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 52
Description
### Have you read the Contributing Guidelines on issues?
- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#reporting-new-issues).
### Description
There's a default [navbar dropdown](https://docusaurus.io/docs/api/themes/configuration#navbar-dropdown), but when I tried to nest this, I got an error:
```
ValidationError: Nested dropdowns are not allowed
```
I believe doing so would be as simple as setting a (default, overridable) maximum nesting value. I'm unsure where this value would be set, however.
### Has this been requested on Canny?
_No response_
### Motivation
Nested dropdowns are widely used across the web, so I think it would be a valuable feature to enable this.
### API design
Currently, it's easy to use [navbar dropdown](https://docusaurus.io/docs/api/themes/configuration#navbar-dropdown) through `docusaurus.config.js` like so:
```
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'dropdown',
label: 'Dropdown',
position: 'left',
items: [
{
label: 'Item 1',
to: '/item1',
},
{
label: 'Item 2',
to: '/item2',
},
],
},
],
},
},
};
```
Using nested dropdowns would be as simple as replacing one such item with a dropdown item:
```
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'dropdown',
label: 'Main Dropdown',
position: 'left',
items: [
{
label: 'Main Item 1',
to: '/mainitem1',
},
{
type: 'dropdown',
label: 'Sub Dropdown ',
items: [
{
label: 'Sub Item 1',
to: '/subitem1',
},
{
label: 'Sub Item 2',
to: '/subitem2',
},
],
},
],
},
],
},
},
};
```
One subtletly (I think the only one): the `position` attribute is not relevant for nested dropdowns.
### Have you tried building it?
_No response_
### Self-service
- [ ] I'd be willing to contribute this feature to Docusaurus myself.
Contributor guide
Assessment
This issue has not been assessed yet.