How to implement material-ui tabs with More dropdown (as shown in documentation screenshot)

Question

I am looking to implement a Tabs component containing lots (7-9) Tab components for a desktop view. I do not want to use the scrollable tabs when it exceeds the viewport width on the Tabs, instead I want the extra Tab items to be in a More dropdown menu just like the example docs show below:

Questions:

1. What is the intended implementation to achieve this? I actually would like the exact same functionality they describe as well where when I click an item from the dropdown above (for example, books), that will swap positions with the Tab directly to the left of the More dropdown, as shown in this screenshot from the doc:

2. Specifically, is the More dropdown a Tab component, or a Dropdown Menu component?
3. When using, how does selecting a tab/option from the More Dropdown work by default? (ex: will the selected tab then get moved to the visible tab portion, just like the screenshots?). Or does this need to be done manually to achieve that result?
4. Lastly, are there links to any examples of this usage?

Answer 1

Late, but it may help someone.

I was able to achieve dropdown within tabs by using the popover component.

https://codesandbox.io/s/436906013w

It has three tabs - One, Two and Three. Clicking on Tab 'Three' will perform the normal tab change. Clicking on the dropdown arrow next to tab 'Three' will provide the additional options.

It is not an exact solution to the question but can be achieved with a similar approach.