[Side navigation] Enable badges for navigation items at all levels

[iblancof]

Describe the feature:

Add a badge at any level of the side navigation (primarily at the root level) across the three existing formats: Stateful Classic, Stateful New (Spaces), and Serverless.

This feature would enhance visibility and user experience by allowing relevant information, such as being in beta or in technical preview, to be displayed more prominently in the navigation.

Here are some raw mockups illustrating the proposed idea:

Navigation	Proposal
Stateful classic
Stateful new
Serverless

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[sebelga]

@iblancof This looks more like an icon than a badge (which would allow a text to be passed). Can you confirm?

[petrklapka]

Assigned to PM and Design to discuss if we want this as a shared feature.

[ek-so]

We have such a doc which is quite relevant for the task. From my side, I don't see any issues with implementing it as on the mockups. @kevinsweet wdyt?

The only issue I see with the design is that now in mockups we have a bit strange round inside a white square when hovered, I guess the square should not be there.

[iblancof]

@ek-so Regarding the mockups in the description, they were quickly put together by me (not a designer), so the square shape wasn't intentional. It occurred because the background wasn't white, and I pasted a cropped version of the badge with a white background.

Sorry for the noise.

[ek-so]

@ek-so Regarding the mockups in the description, they were quickly put together by me (not a designer), so the square shape wasn't intentional. It occurred because the background wasn't white, and I pasted a cropped version of the badge with a white background.

Sorry for the noise.

Thank you! No worries, I just wanted to check. When there is a PR, I can also check to see if everything behaves as intended. I guess there should standard components for it already in place, but please let me know if you need design mockups for smth.

[iblancof]

@iblancof This looks more like an icon than a badge (which would allow a text to be passed). Can you confirm?

Hey @sebelga, sorry for the delayed response, I missed your question.

In this case, it's a technical preview icon, but there are other scenarios where we’d like to display text like “Beta.”

Here's an existing example for clarity:

[sebelga]

In this case, it's a technical preview icon, but there are other scenarios where we’d like to display text like “Beta.”

Ok, so you both need to be able to add

• A badge (passing a text value)
• An icon (passing an EUI icon value)

@ek-so can you take both into consideration?

I guess that we will only allow that for links and not group parent, correct? Or do we forsee the need for the group parent to support that? In that case we need to validate that these badges/icons don't "fight" with the group parent icon on the right

[petrklapka]

@sophiec20 @rayafratkina @formgeist @yanwalton @mwtyang - This would be a perfect topic for discussion in a "UX Consistency Workgroup". We have a request from a single solution to add a nice feature to a shared component. We can do this easily, but, it introduces inconsistency to the UX depending on how it is used (or not used!) by solutions. This isn't something I feel SharedUX should move on unilaterally, and a "blessing" from design and PM with the consideration of a new guideline for how badges are to be used in sidenav would be good to have before we start coding and designing away.