facebook / facebook/docusaurus

Nested dropdown

Ouverte
#5,938 3 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
feature
Langage dominant
TypeScript
Étoiles
66.2k
Forks
10k
Merge moyen
1 j 3 h
PR mergées (30 j)
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.

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.