WordPress admin menu cannot cater for hundreds of menu items

[tvejacques]

The UI dropdown for taxonomies gets confused at around 400 entries. It then blocks the canvas, making it impossible to work - which I add as Major (but it actually is critical for us).

See the screenshots
​https://www.care4tulbagh.org.za/annoying3.jpeg
​https://www.care4tulbagh.org.za/annoying.png
​https://www.care4tulbagh.org.za/annoying2.png

Use Case:
There are some large taxonomies in the world. For example there are 249 different bird families with 2,057 genus and 11'000 species. In the medical field taxonomies are large.

Wordpress should be able to handle this. The DB of course can handle this, but not the UI.

Troubleshooting done
Standard basic troubleshoots were done (deactivating plugins etc.).
Developers of two plugins (Toolkit and Custom Post Type UI) gave support.
Both plugin developers concluded it is a WordPress UI problem, as their plugins use WP functionality in this regard.

Recommended fix:
Give users different options for the taxonomy UI.

1. If dropdown:

• Indicate alphabet list as primary level, and list array in alphabetical classes.

A --> Alpha
...... Amber
...... etc
B --> Beta
...... Bomb
...... etc
C --> etc

2. Use the same UI design as for Pages/Posts lists* - table-like format

P.S.

• On Pages/Posts lists:

it would be great to be also able to categorize those lists for easy navigation

[swissspidy]

Changing the component here because this would be a general issue with so many menu items, not just with taxonomies.

[dotrex]

Here is a code snippet that we can use to quickly reproduce this issue. It will add 100 sub-items to the Tools menu in WP dashboard:

<?php
/*
* Adds 200 custom submenus to the Tools menu in the WordPress dashboard menu
* it can be used to reproduce this issue: https://core.trac.wordpress.org/ticket/61177
*/
function add_custom_submenus() {
    // Loop to add 100 sub-items
    for ($i = 1; $i <= 100; $i++) {
        add_submenu_page(
            'tools.php', // dded to tools, but you can use any page here
            "Custom Tool $i", // Page title
            "Custom Tool $i", // Menu title
            'manage_options', // Capability
            "custom-tool-$i", // Menu slug
            'custom_tool_page_callback' // Function to display the page content
        );
    }
}

// Callback function to display the content of the custom tool page
function custom_tool_page_callback() {
    echo '<div class="wrap"><h1>Custom Tool Page</h1><p>This is a custom tool page.</p></div>';
}

// Hook the function to the admin_menu action
add_action('admin_menu', 'add_custom_submenus');

Afterthat, you should be able to see the issue: ​https://i.ibb.co/v1CghNW/screenshot-2024-08-16-a-s-17-00-47.png

This could be fixed with the following CSS. It will limit the menu height to the screen size, and also add a scrollbar:

#adminmenu .wp-submenu {
    overflow-y: scroll !important;
    max-height: calc(100vh - 60px);
}