Breadcrummy

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!

Separator

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;

Specifications

Machine name

breadcrummy

Perks

Using Sass
Responsive
Accessible

Building blocks

HTML
CSS

Stats

Public component
22 downloads
No open issue

Contributors