By james, 5 December, 2023
Day 5 the Admin Navigation project

For our fifth door, Cristina Chumillas (ckrina) introduces us to the new Admin Navigation a new admin toolbar (not to be confused with Admin Toolbar), which aims to replace the default admin menu in a future Drupal release.

The new administration navigation has been created to replace core’s default Toolbar. More than 70% of Drupal sites customize it with contrib modules, so it’s clear that it has become obsolete. The new navigation will move most of the existing top toolbar into a left vertical sidebar that we’ve been testing and evolving over the last months. The goal is to provide a more usable and customizable core navigation that will provide an optimized experience for site builders and content users alike.

The process we’ve been following has been the continuous testing and iteration of the initial designs and prototype with user research that have led us to important improvements. One of them has been the need for an additional area that would accommodate the main actions of each page. So we’ve introduced a top bar that will hold the main actions for each page (like the save button or the local actions). But we’ll move other elements to this contextual region, like the breadcrumbs and the “Back to site” link, which will help clean up vertical space and see more information above the fold.

The new navigation in the sidebar
The new navigation in the sidebar

The initial designs were based on several old hypotheses validated with research of competitors, industry standards, and previous UX studies on the topic. But also insights from Gin, that already provides several of these improvements. We’ve evolved the initial work thanks to several rounds of usability tests and the help of community members and companies that have provided their time and efforts to make this new feature a reality.

We’re working on the architecture definition that will eventually let site builders customize the administration navigation, and an easy to use system that will provide tools for developers to extend the default functionality. This roadmap will let us land an already usable MVP that will let us introduce new features while the community will be able to use it sooner.

We’re focused on launching an alpha release soon so we can gather feedback and iterate on it before the release of Drupal 10.3, which we have set as a goal to get in as an experimental module. Help us improve the new navigation by testing the module and working on the parts that still need design and development: get involved in the #admin-ui Slack channel.

Photo of Cristina ChumillasCristina Chumillas is a senior Front-end Developer at Lullabot, as well as a Drupal core provisional front-end framework manager and UX maintainer.


Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.