Labels on the tabs in the Left Hand Navigation

thomasnadin

I really struggle to differentiate between the different icons in the main left hand nav.

Ironically, you've aria-label'd them all up, so users using screenreaders can more easily identify them, which is good at least!

I'd love an option to just show these labels so I can quickly identify where is which. I'm happy it being permanently there, but , even if it just expanded on hover it'd suffice.

In the meantime, should anyone else stumble across this, you can use this CSS if you use an extension to alter websites to make the labels show:

.fe-root-layout__nav {
  --width: 166px;
  width: var(--width);
}

.fe-root-side-menu {
  width: var(--width);
}

.fe-root-menu-item__link {
  width: calc(var(--width) - 40px);
  justify-content: flex-start;
  gap: 0.75em;
}

a.fe-root-menu-item__link:after {
  content: attr(aria-label);
  color: #e8e8e8;
}

.fe-root-menu-item .fe-root-ui-components__count {
  top: 1px;
  right: auto;
  left: 31px;
}

You end up with something like this: