This component is an alternative to showing breadcrumbs on your page in a smooth mobile way without wrapping to multiple lines.

This component doesn't use JS, so everything is CSS-only!



All links are separated by a /. Feel free to adapt this to your design.


Smaller screens

On smaller screens there is a horizontal scroll, with the scrollbar hidden in the browser. 

To indicate there is a horizontal scroll possible, we are using a scroll-helper that shows a white-gradient on top of the content on the right side. 


Bigger screens

On bigger screens it is less common to horizontally scroll, so we disable the scroll there.

Instead, we are showing all the links next to each other again, but clipping the text of the links with the css property of text-overflow: ellipsis, when there is not enough vertical space. On hover, the link grows until all text is shown. 

Creating the component from the backend.

The data-table component is a new component that can be called from the backend by defining a renderable array:

$links = [];

// Fill in the $links array with links
$links[] = $node_a->toLink();
$links[] = $node_b->toLink();
$links[] = $node_c->toLink();

// Create the render-array that will create the breadcrummy component.
$my_breadcrumb = [
  '#theme' => 'breadcrummy',
  '#links' => $links,


Choosing the breakpoint  

By default this component breaks on 40rem, but feel free to adapt this by changing the variable inside breadcrummy.scss:

$bp-s: 40rem;


Using Sass
horizontal beam No open issue