How to remove newly added blue arrows at top level of menu

Who thought of making these markers? It is necessary to delete them!

Please can you add an checkbox in the config interface to disable this feature ?
Thanks !

troesler wrote in #4:

Please can you add an checkbox in the config interface to disable this feature ?

I do agree. I do not like those "blue arrows" either. There should be a way to hide them.

I've initially commented on 🐛 Upset theme since update to 3.3.1 Closed: duplicate since i thought that issue would be about the blue buttons in general but turns out it was about gin in particular and this issue was recommended for Claro.

In general I strongly disagree about hiding or removing those buttons. From a functional perspective the changes introduced in ✨ Tabbing order does not satisfy 508 accessibility requirements Needs review are important ensuring that the 508 accessibility requirements are satisfied. The problem is more about the styling of the buttons than the inherent functionality they provide. And you also have to note that this styling isn't something new, on the vertical toolbar, even if admin_toolbar is not installed, those blue buttons are already in use for quite a while.

But on a cognitive level those blue buttons pose a more serious problem in the context of the horizontal toolbar compared to the vertical toolbar. personally my focus it completely drawn to the blue buttons and if my eyes scan the horizontal toolbar i have a hard time distinguishing the different buttons because the attention is completely drawn away from the visual cues the icon the menu item labels provide - they become sort of subsidiary close to invisible. on the vertical toolbar the effect isn't that drastic but the blue buttons were one of the reasons i haven't used the vertical toolbar and stuck to the horizontal so far.

but i wonder would it make sense instead of removing or hiding the blue button "just" update it's styling and lower its affordance like it was done for the gin toolbar? 📌 Toolbar style update Needs work would basically already solve that problem since it changes the styling of those buttons. The only problem that this issue isn't close of being fixed.

I think the user shoud be able to decide about the visibility of those buttons. In the toolbar settings there should be a possibility to disable them. That's not that difficult?

I use two small monitors 1280x1024.
These down arrows occupy so much width that they make the admin toolbar wrap so it occupies two rows and obscures the top of the page.
I had to add this to my theme to restore things:
.toolbar-tray-horizontal .level-1 > .toolbar-box .toolbar-handle { width: 2.2em; }
Not happy.

Yes, accessibility is a very important priority and I fully support it. But come on, it is counter productive if it penalized the visual comfort of most users. UI/UX is an holistic science and art which should not only blindly follow rules in detriment of the ease of use. On 1440px screen, the horizontal toolbar is now split on two rows! This is not a good way to make people receptive to accessibility improvement.

It seems like this feature was added without an issue or notification in release notes? Unless I'm missing where it came from, the commit is not associated with any issue https://git.drupalcode.org/project/admin_toolbar/-/commit/ed4b6816274525...

This breaking update should have been include in a medium or major version release at minimum, not a minor version one.

Lots of us have been forced to roll back to 3.3.0 version, crossing fingers about the database update...

I also saw this issue with 3.3.1 and 3.3.2
Reverted to 3.3.0 and working fine.

Updated Gin to 3.0.0-rc3 and toolbar 3.3.2 and the ugly arrows is resolved.

Here's a patch that uses the same methdodology Bootstrap does for screen readers to hide the arrows on Level 1 and restore the right padding of the top level links.

Here's a patch that uses the same methdodology Bootstrap does for screen readers to hide the arrows on Level 1 and restore the right padding of the top level links.

I applied the patch #14 and it's working properly. Those blue arrows are gone from the admin toolbar.

I've got the same bug on 1680 px width screen (two rows splitting of toolbar with overlapping page header).

+1 for #14 or making it a config option

+1 for making it a config option. Installed the patch. Anyone else have double arrows showing on submenus too?

Hi carsonw → ,

After trying out the patch mentioned in comment #14, I found that it successfully hides the arrows. However, it has a downside in that it affects the accessibility of the dropdown, as it cannot be accessed through the tab key.

Hi mistergroove, I can confirm that I also get the same blue arrows when switching from v 3.3.1 to v 3.3.2 of the module.

mistergroove wrote in #19:

+1 for making it a config option. Installed the patch. Anyone else have double arrows showing on submenus too?

No, I do not have double arrows on submenus.

I'm using Olivero theme and Claro admin theme.

Added config option to enable and disable blue icons as per user preference

Demo image files

Hey folks! I have applied Patch #24. My Drupal version is 9.5.9, PHP version - is 8.1. I have applied the patch using Composer (2.6). and it worked perfectly fine for me. As you can see my attached images(before_apply_patch & after_apply_patch.png) for reference. Please & Thank You.

@aziza_a, thank you for your patch! It works great with Drupal 10.0.9.

Hmm! after applying the patch, my admin toolbar with the blue arrows is splitted on 2 lines. The "Help" is on the second line. So there is something wrong with some patch settings for me.

When I click the checkbox for disabling the blue arrows, it works as expected.

When I uncheck the box to return to the toolbar with blue arrows, the toolbar is splitted again on 2 rows.

So, I went back to the original admin toolbar 3.3.2 on Drupal 10.0.9

Hi @aziza,

After trying out the patch mentioned in comment #24.
1. patch '3357210-24.patch', working fine to hide the arrows.
2. After applying the patch it has a downside in that it affects the accessibility of the dropdown, as it cannot be accessed through the tab key.
3. Also tried with version 10.0.9, as per comment #28, but not facing any issue with after apply the patch with enable mode.

After applying the patch it has a downside in that it affects the accessibility of the dropdown, as it cannot be accessed through the tab key.

Have tried to fix this issue

Harish1688 commented in #30

3. Also tried with version 10.0.9, as per comment #28, but not facing any issue with after apply the patch with enable mode.

I tested in version 3.3.2 of admin toolbar and not in 3.x-dev.

Please ignore #30 wrong patch added

Hi @redseujac,

Checked on 3.3.2 not able not replicate it.

aziza_a commented in #32:

Checked on 3.3.2 not able not replicate it.

OK. I will try again with the patch #32.

If I remember correctly, there is a database update needed after the patch? Could you confirm this please?

Maybe I could have found the cause of my problem.

I have an additional toolbar item in my menu: 'Webforms'.

Indeed 'Webforms' can be displayed as a main toolbar item (with a dedicated icon), instead of being displayed under 'Structure'.
( https://www.drupal.org/node/3168118#:~:text=To%20move%20the%20Webforms%2... → .)

So, with that extra menu item, my admin toolbar became longer, all the more because I'm using the Dutch language and the text of the menu items are also a bit longer in Dutch.

However, when I'm using the original admin toolbar with the blue arrows, in spite of the extra menu item, the toolbar is displayed on just one row, while after applying the patch the toolbar with the blue arrows is displayed on 2 rows.

Could you try to replicate with 'Webforms' displayed as a main toolbar item?

I checked the #32 patch and it works well.

Hi @aziza,

Verified the patch "3357210-32.patch" mentioned in comment #32, with core version 9.5 and 10.0.9.

Based on comment #34, I have tested the webform module by setting it as a top-level item in the toolbar. I did not encounter any issues during testing. The functionality is working perfectly fine.

After applying the patch has successfully resolved the accessibility issue with the dropdown, mentioned in comment #29.

Looks fine for me.

Harish1688 commented in #36

Based on comment #34, I have tested the webform module by setting it as a top-level item in the toolbar. I did not encounter any issues during testing. The functionality is working perfectly fine.

I see on your screenshot that the blue arrows are NOT enabled at the admin toolbar.

My problem with the splitting of the toolbar occurs when the blue arrows are enabled.

Hi @redseujac,

If we enable the blue arrows, the appearance of the menu will be altered. Enabling the blue arrows will cause additional space to be occupied, resulting in longer menu items. As a consequence, the menu items may span across two lines. However, in this specific ticket, the decision was made to remove the arrow to prevent the occurrence of extra spaces and design within the toolbar.

I'm closing this as a duplicate of ✨ Tabbing order does not satisfy 508 accessibility requirements Needs review I think we should discuss and try to fix the issue there. New release coming in the next minutes reverting all the code, I missed some commits on the last revert.