[Serverless] Use EuiBreadcrumbs instead of EuiHeaderBreadcrumbs

[Dosant]

Currently serverless breadcrumbs use EuiHeaderBreadcrumbs but in the design suggests EuiBreadcrumbs were intended to be used

Currently:

Desired:

We should update the component and also adjust the content structure.

This will also fix #165515
And also will help with as the project name becomes part of the breadcrumbs that provides the popover #166182

For the content structure I suggest:

• The elastic logo will link to the “home” of the project (getting started / landing / etc)
• Breadcrumbs:
  • Root breadcrumbs are
    • the “Project Name” with a popup to "manage project" / "view all projects"
    • the project type name
  • Then go navigational breadcrumbs

cc @ryankeairns

[elasticmachine]

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

[ryankeairns]

Thanks Anton!
Does this look accurate to you @MichaelMarcialis ?

[sixstringcode]

Talked with @ryankeairns , we're going with the text root breadcrumb with the project type instead of the icon. The project selector will be linked to the actual project name. The Figma designs (design 2 above) are current.

[Dosant]

Talked with @ryankeairns , we're going with the text root breadcrumb with the project type instead of the icon. The project selector will be linked to the actual project name. The Figma designs (design 2 above) are current.

@sixstringcode, @ryankeairns, in this case, would would be the correct labels to use here for the project types. I assume:

• Elasticsearch
• Observability
• Security

[MichaelMarcialis]

Thanks Anton! Does this look accurate to you @MichaelMarcialis ?

@ryankeairns, @Dosant: This sounds largely as I had intended. The only thing that caught my eye was the notion that we would include an ever-present project (i.e. solution) type name as part of the root breadcrumbs:

• Breadcrumbs:

  • Root breadcrumbs are

    • the “Project Name” with a popup to "manage project" / "view all projects"
    • the project type name

  • Then go navigational breadcrumbs

This wasn't my original intent. Given the design in screenshot 2, "Elasticsearch" would only appear as the second breadcrumb if/when a user was currently viewing a page within the Elasticsearch solution navigation bucket. If the user were to navigate to a page within "Project settings", that second breadcrumb should change to "Project settings". Let me know if that makes sense or if further discussion is needed.