facebook / facebook/docusaurus

Nested dropdown

Open
#5,938 3 comments 1 reaction 0 assignees View on GitHub
feature
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.