How to hide breadcrumbs but save H1 page heading

I'm trying to control breadcrumbs visibility depends on the availability BreadcrumbComponent in the CMS Page structure.

But based on breadcrumb.component.html, if we remove this component - H1 heading will be also deleted:

<nav>
  <span *ngFor="let crumb of crumbs$ | async">
    <a [routerLink]="crumb.link" [innerHTML]="crumb.label"></a>
  </span>
</nav>

<h1>{{ title$ | async }}</h1>

We can handle breadcrumbs visibility by Page Meta Resolver, is it most property way to resolve this case, or maybe Spartacus will split H1 heading and breadcrumbs into separate components ?

Solution

Like you noted the H1 is the page title but also part of the breadcrumbs component.

With the current implementation if I am not mistaken removing the breadcrumbs will leave the title and a Home link on top of it. So if you just want the title without the link you will have to change breadcrumb component logic.

You should provide your own breadcrumb component that behaves in a way that when no breadcrumbs are provided the home link wont appear and you will only see the title.