Theming breadcrumb.html.twig

Question

In my theme I need to print the breadcrumbs using two different UL class names so they can be styled differently. For mobile device the breadcrumbs appear at the top with the UL

<ul class="topnav">

For large device the breadcrumbs appear in the left sidebar with the UL

<ul class="leftnav">

They both also have different LI an A class names. But I only have one template file to work with called breadcrumb.html.twig, and its themed for the topnav.

In my top region I print out the breadcrumbs with this and it the style looks good:

{{ drupal_block('breadcrumbs') }}

And for the sidebar I print out the breadcrumb again using this:

{{ drupal_block('breadcrumbs') }}

But Its using the same style as the first nav. How can I theme it differently using different class names? Can I create a theme preprocess hook and use 2 templates. breadcrumb-1.html.twig and breadcrumb-2.html.twig. THen print it like this {{ drupal_block('breadcrumbs-1') }} and {{ drupal_block('breadcrumbs-2') }}

I edited this because its not clear what I want. I mainly want to know if I can created and use two different templates for breadcrumb.html.twig. In Twig debug FILE NAME SUGGESTIONS, it does not give any suggestions for this template which means I can only use one in my theme. I think what I will do is add two different ul class names in my template then print the breadcrumb in each one, then add style by targeting the two different ul class names.

Answer 1

One quick option is to add some html markup that wraps the region (if you've disabled the default Drupal theme markup) in your page twig template where you call {{ drupal_block('breadcrumbs') }}.

For instance,

<div class="topnav">
{{ drupal_block('breadcrumbs') }}
</div>

and

<div class="leftnav">
{{ drupal_block('breadcrumbs') }}
</div>

---

Alternatively, if your theme is setup to render blocks assigned to regions in Drupal's Structure > Block Layout, you could:

1. install/enable the Block Class module (as of Feb 23, it's in an alpha release for D8)
2. place two Breadcrumb blocks, one per region
3. assign your topnav and leftnav classes in the block config screen

---

For both use cases, you'll need to change your css to target:

.topnav ul
.topnav ul li
.leftnav ul
.leftnav ul li