How to create responsive Breadcrumbs in materializecss?

Question

I am using materializecss for front end In my jsp pages, I am using Breadcrumbs for show information on top of the page it's working fine but whenever I seen my pages on mobile browser or small screen then whole Breadcrumbs is not showing. So how to make responsice any suggestion ?

<div class="section" style="padding-bottom:0;">
            <div class="row">
                <nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">
                    <a class="breadcrumb" href="<c:url value="/"/>">Home</a>
                    <a class="breadcrumb" href="<c:url value="/${currentCityName}"/>">${currentCity.name}</a>
                    <c:forEach items="${breadCategories}" var="c">
                        <c:set var="puri"><catalog:CategoryUri category="${c}"/></c:set>
                        <a class="breadcrumb" href="<c:url value="/${currentCityName}${puri}"/>">${c.name}</a>
                    </c:forEach>                
                    <a class="breadcrumb" href="javascript:;">${product.name}</a>
                </nav>                   
            </div>
        </div>

Can you embed your code on jsfiddle? – luke Apr 10 '17 at 07:08 — luke, Apr 10 '17 at 07:08

score 1 · Answer 1 · edited Sep 11 '17 at 20:16

In my opinion, for the mobile device you can ignore the breadcrumb part as it doesn't looks nice on a mobile screen. Hence, it would be a waste of space.

e.g.:

@media only screen and (max-width : 992px) {
   .breadcrumb-nav {
      display:none;
   }
}

Or you can also decrease the font size of your breadcrumb:

@media only screen and (max-width : 992px) {
   .breadcrumb-nav {
      font-size:;
   }
}

score 0 · Answer 2 · answered Apr 10 '17 at 07:04

I am not completely sure, but it might work if you replace

<nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">

with

<nav class="breadcrumb-nav col s12 truncate" style="height:40px; line-height: 40px;">

The difference is l12 becomes s12. this tells materialize to give the breadcrumbs 12 columns on small and higher.

score 0 · Answer 3 · answered Apr 12 '17 at 16:18

In addition to changing from l12 to s12, you have another issue.

The reason your breadcrumbs are being cut off is due to the truncate class. By design, Materialize will cut off any content that exceeds the size of the container/screen. Materialize Documentation on Helpers

Try removing this class. Then you may have other styling issues, but it shouldn't be cut off any longer.

score 0 · Answer 4 · answered May 25 '17 at 05:33

Your breadcrumb is going out in the mobile screen so you need to check your mobile css and try this one this might help you

<nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">

TO

<nav class="breadcrumb-nav col s12 truncate" style="height:40px; line-height: 40px;">

here is the reference that might be helpful for you.

score 0 · Answer 5 · answered Aug 16 '17 at 23:50

Modify this code here is example

<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

score 0 · Answer 6 · answered Aug 28 '17 at 08:20

0

you can add style word-wrap: break-word in the text, and i think it will work just fine

answered Aug 28 '17 at 08:20

KawishBit

650
1
8
18

How to create responsive Breadcrumbs in materializecss?

6 Answers6