Skip to main content

New Navigation System - Recap, CSS tips, and heading into GA on July 22nd

  • May 22, 2026
  • 4 replies
  • 206 views

Hi everyone,

As shared in previous updates, the New Navigation System is now available to everyone in opt-in mode, with a preview option to try it out before switching, and GA scheduled for July 22nd.
I'd like to take this opportunity to recap what's changed, share what's coming next, and acknowledge the work still in progress.
The redesign was driven by a simple goal: make information easier to find, the structure clearer, and the experience better for both new users and seasoned admins.
 

What's new

A reorganised menu structure
The menu is now organised around predefined categories. This brings more order to the information hierarchy and makes it easier for users, especially newer admins or anyone looking for unfamiliar features, to understand how the menu is built and where to find what they need.
 

Search shortcuts to menu items
For users who already know the page they want to reach, we've added menu shortcuts directly inside search. Typing a term like "user," for example, will surface the matching pages in the "quick suggestions" section of the search results, allowing users to jump straight to the page without browsing the menu manually. A small change, but a meaningful one for more experienced users.
 

 

Favorites
The Favorites section has been very well received, thank you for the positive feedback. We're already working on the next iteration: the ability to reorder favorites via drag & drop. This will land before the July 22nd GA.

 

On custom CSS and the transition

We know one of the trickier parts of moving from the old navigation to the new one is handling existing custom CSS. The new system introduces structural changes in the underlying code that were necessary, and mandatory, to meet specific accessibility requirements. As a result, some existing customisations may not carry over automatically to the new navigation.

To support the transition, we've put together a reference document describing the hierarchy and the classes used in the New Navigation System.

Docebo New Navigation System - CSS reference

It's intended as a guide for anyone who needs to target specific classes and reapply structural or styling tweaks.

As an example, here's a snippet that addresses a frequently requested customisation, hiding the title bar, but only when it doesn't contain any action button or call to action:

Css

app-layout-title-bar:not(:has(app-layout-title-bar-end-slot button)) {
display: none;
}

 

Still on our plate

The work isn't done. The team is actively addressing remaining glitches, minor visual issues, and unexpected behaviours surfaced during real-world use. Every piece of feedback we've received has been read and considered, please keep them coming.

A genuine thank you to everyone who's tested, reported, and shared input so far. The shape of the new navigation today reflects your contributions, and we're counting on it to make GA as smooth as possible.


Alessandro

4 replies

hwolfehall
Helper I
Forum|alt.badge.img+3
  • Helper I
  • May 22, 2026

Super excited that the reorder Favorites will hit by GA!  Thank you!  :) 


lrnlab
Hero III
Forum|alt.badge.img+10
  • Hero III
  • May 22, 2026

@Alessandro Ortolina I have some requests to bring back the coloured breadcrumb bar as it’s the only real ‘default’ colour option you used to see when you were navigating the site. Do you know if seam version of that will ever be brought back? Do you have any suggestions for those who would like to see other than a widget on a page? Thank you.


Jessica Tart
Helper II
Forum|alt.badge.img+5

Thank you for creating the CSS reference guide!

 

We partnered with GuyKat to create a custom homepage user experience. As a part of that project, GuyKat created a permanently expanded menu spanning the top of every page by altering the HTML code within the Header area of the platform. Will we still be able to use and format this menu? The new experience currently breaks it (along with all of our custom code). 

 

Old Navigation View: 

 

New Navigation View: 

 


averygrammel
Influencer I
Forum|alt.badge.img+2
  • Influencer I
  • June 4, 2026

Hiding the Extra Title Bar on a Learner’s Homepage with the “Share this view” Button:

If you're using Docebo's custom branding CSS to remove the navigation/title bar such as shown in the example in the post, this works on most pages — but on pages like the homepage, Docebo injects a "Share this view" button into that slot. The bar detects a button is present and stays visible.

 

The fix

Rather than just hiding the Share button with display: none (which keeps it in the DOM and breaks the :has() check), target the title bar based on whether any button other than Share is present:

 

/* Hide the Share button */
button[aria-label="Share this view"] {
display: none !important;
}

/* Hide the title bar if it has no visible buttons besides Share */
app-layout-title-bar:not(:has(app-layout-title-bar-end-slot button:not([aria-label="Share this view"]))) {
display: none !important;
}

 

Why it works

display: none removes the button visually but not from the DOM, so :has() still detects it. By flipping the logic — hiding the bar when no buttons besides Share exist — you get the correct behavior on every page. Pages with legitimate action buttons keep the bar; pages with only the Share button (or no buttons) hide it entirely.

 

Hope this saves someone the debugging time!

 

After Example: