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.

1 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 class="leftnav">
{{ drupal_block('breadcrumbs') }}

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

block class module enabled

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

.topnav ul
.topnav ul li
.leftnav ul
.leftnav ul li
  • Thank you Anson. I've used the block class module module before. I decided to just wrap the breadcrumbs in 2 different class names like you said but instead of a div class I will use a ul class like this <ul class="topnav"> and <ul class="leftnav">. So we will have nested uls. I think either way is fine? div or ul shouldn't matter. Commented Feb 23, 2018 at 23:31
  • 1
    <ul/> is only for grouping list items. You should not wrap other elements with it besides <li/>.
    – ya.teck
    Commented Feb 24, 2018 at 5:30
  • @ya.teck, I understand, But could I have a nested <ul/>? So then the breadcrumb <ul/> will be inside of an <li/> Commented Feb 26, 2018 at 0:34
  • @paulcap, Yes this would be valid markup.
    – ya.teck
    Commented Feb 26, 2018 at 3:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.