Navigation Blocks and Local Tasks for Drupal's Admin UI

We cover the latest changes and future possibilities for customizing Drupal's administration experience.

We've been working on improving the administration UI for Drupal and have already talked about our prototypes and testing process. A big part of this has been a redesign of the toolbar.

But Drupal sites are used for different verticals, scenarios, team sizes, team makeup, features, and more. To make the new toolbar useful, it needs to be flexible and customizable. Our latest work has focused on implementing the backend for administrators to manage the new toolbar.

You can try out these changes right now by installing the Navigation module. The goal is to make this a part of Drupal core by version 11.

Navigation blocks

A sidebar and top bar are introduced that replace the top bar provided by Drupal core's toolbar module. The sidebar has a region that can be managed similarly to Drupal's other blocks. 

We created a new plugin type: navigation blocks. Navigation blocks can be rearranged, enabled, disabled, and configured to be visible conditionally, just like Drupal blocks. Visibility behaves as you would expect. Items are hidden or shown based on the permissions of the currently logged-in user.

The Navigation module ships with blocks for all configured menus on the site and a Shortcuts block. Module developers can add additional blocks as plugins, allowing complete customization of administration menus. To manage navigation blocks, go to Configuration > User Interface > Navigation blocks. The interface is modeled after the "Manage blocks" interface so that it will be familiar to most site builders.

The module comes with two defined permissions:

  • Access navigation bar - meant for users who manage and create content.
  • Administer navigation blocks - meant for site administrators and site builders who manage the navigation blocks. 

Development and testing have focused on the Claro theme, but the goal is to make it compatible with a wide range of admin themes.

Local tasks

After exploring the possible integrations with the left-hand menu, we discovered that some items, like those related to the current content of a page, were not easily accommodated. We started testing the idea of moving contextual actions and information to the top toolbar.

Currently, entities have a menu of local tasks that show up when a user is logged in, depending on that user's permissions. These tasks also appear in the front-end theme, which can cause confusion if it isn't integrated correctly with the project's front-end styles.

Local tasks displayed above a node

Moving them to a dedicated area of the admin menu with a more predictable pattern will help prevent confusion. The Navigation module moves these local tasks to a dropdown.

New local tasks grouped into a dropdown on the toolbar

More is planned for this top bar area, which is in active development and going through rounds of user tests. See below for some of the ideas we are testing and iterating, which include status information like whether the content is published and when it was last saved. The area also has the potential to display buttons like Preview and Save.

Sample toolbar showing Save and Preview button, status, and Local tasks dropdown

The module is disabled by default, but it can be enabled with a configuration setting. We want to ensure it won't break any sites while things are still in flux.

Get involved

This initiative is a community effort. We want to thank all of the Bots that have offered their expertise, including Matt Oliveira, Andrew Berry, Pablo López Escobés, Cristina Chumillas, Claire Ristow, Pauline Judge, Adam Varn, Aubrey Sambor, Brenna Love, Megh Plunkett, Laura Donelan, Sydney Barnes, Jared Ponchot, Ana Barcelona, and Jen Witkowski.

The latest community contributors are Tim Plunkett, Ted Bowman, Ivan Berdinsky, Théodore Biadala, Lauri Eskola, Prashant Chauhan, Mike Herchel, Gábor Hojtsy, Konstantin Shupenko, Svitlana Fedchenko, and Sascha Eggenberger.

We have weekly meetings every Wednesday at 10:00 AM ET, and we welcome you to join us. You can also find conversations in Drupal Slack at #admin-ui.

Try out the module. Submit issues. Test patches.

View the current roadmap that lays out what we need to get the new toolbar to stable. Many issues have to do with accessibility, design, integrations with other modules, and code refinement.

Get in touch with us

Tell us about your project or drop us a line. We'd love to hear from you!