Nested dropdown

[ghost]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Description

There's a default 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 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.

[Josh-Cena]

I agree we should have this. This has been requested on Canny: https://docusaurus.io/feature-requests/p/nested-navbar-dropdown And the OP has presented a very clear UX that makes sense.

We decided to postpone the support for nested dropdowns: https://github.com/facebook/docusaurus/pull/5072#issuecomment-880024762 because a lot of the styling work will be done on the Infima side which isn't ready yet. However it's useful to keep an FR to show interest from the community in this feature

[Cindy0622]

What's the status on nested dropdowns?

[Josh-Cena]

Hi everyone, Docusaurus is an open-source project and is largely community-driven. All progress is public on GitHub. If there's no linked PR and no discussion, that means the maintainers do not have the bandwidth to pick this up. It means if you want to see it become reality, consider being that person who implements it—either in the form of a prototype (remember you can always swizzle components and implement it in userland), or in the form of a formal API design / UI design proposal. Asking for status doesn't change our priority and only pollutes the notifications for everyone who subscribed to this issue and are waiting for actual progress.