Responsive Breadcrumb?

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
primeUser99282
Posts: 36
Joined: 14 Nov 2021, 01:48

03 Dec 2021, 20:14

Is there a way to make the breadcrumb responsive?

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

15 Dec 2021, 10:29

Hi,

Please try;

Code: Select all

body .layout-breadcrumb {
    overflow-x: auto;
    overflow-y: hidden;
}

body .layout-breadcrumb::-webkit-scrollbar {
    display: none;
}
Best Regards,

primeUser99282
Posts: 36
Joined: 14 Nov 2021, 01:48

16 Dec 2021, 17:04

This doesn't work. It just truncates it. It's strange that the entire template is responsive except for the breadcrumbs.

primeUser99282
Posts: 36
Joined: 14 Nov 2021, 01:48

16 Dec 2021, 17:16

I'm looking for something like this:

https://codepen.io/danield770/pen/nmBKr

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 Dec 2021, 19:46

Hi,

This is about implementation. Our breadcrumb component provides this feature with scrollable for multi-content. In general, most ui component libraries follow this way.
PrimeFaces Breadcrumb component;
https://www.primefaces.org/showcase/ui/ ... rumb.xhtml

Best Regards,

dollface
Posts: 2
Joined: 21 Dec 2021, 08:04
Location: Spain
Contact:

21 Dec 2021, 08:20

hi, I think it depends on your webiste's theme. did u find any helpful thing?
to see my homepage, u just need to touch it.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

22 Dec 2021, 08:30

Hi,

It has been made scrollable to make the breadcrumb component responsive. Video;
https://www.dropbox.com/s/6eszpi6jqskvr ... b.mov?dl=0

Code: Select all

<style>
body .layout-breadcrumb {
    overflow-x: auto;
    overflow-y: hidden;
}

body .layout-breadcrumb::-webkit-scrollbar {
    display: none;
}

body .layout-breadcrumb .breadcrumb .route-bar-breadcrumb > li .ui-link {
    white-space: nowrap;
}
</style>
If you want to wrap items on responsive mode, you can override our css according to your needs.

Best Regards,

Post Reply

Return to “Rain - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests