Display Breadcrumbs as Heros

#css #apex

In many of my APEX projects I use breadcrumbs. Here, the user can see where he currently is in a particular application. If you include a breadcrumb region in APEX, the path or hierarchy you are in or have clicked through is displayed at the top.

Now I find it somehow nicer to give the header of the page a recognizable look and feel. The best way to achieve this is to display the region of the Breadcrumb as a hero and to give the region the title of the page or the active Breadcrumbs.

What bothers here now is that the active breadcrumb is also still displayed. We can easily hide this with the following CSS.

/* hide active breadcumb entry */
.t-Breadcrumb-item.is-active {
  display: none;
}

Now we take care of the display. I personally think that in this case the Breadcrumb must be displayed before or above the Hero title. Of course we do this with some CSS.

/* reverse order of childs */
.t-HeroRegion-col.t-HeroRegion-col--content {
  display: flex;
  flex-direction: column-reverse;
}

And finished is our Breadcrumb

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.