Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[SMF 2.1]Remixed Breadcrumb

Started by TwitchisMental, January 03, 2022, 02:04:09 PM

Previous topic - Next topic


Thanks for sharing that information Ant.


Quote from: Diego Andrés on May 30, 2024, 08:00:25 PMAlso it looks like the article didn't bring up if the user would prefer to start at the end (where you are), or the default behavior starting where you come from. Would require JS to keep the scroll at the end by default I imagine.

The examples shown in the article seem to default to default to starting at the home end, and they seem to think that is fine. It would probably make sense for the majority of users too, since I assume right-handed users would naturally be more inclined to swipe left. I hold the phone in my left hand, and flicking my right forefinger left to swipe left just comes naturally. Swiping right is less intuitive for me.


Just had a thought about this scrolling breadcrumbs thing. It may be possible to improve it further by using scroll-snap.

This could be used to ensure that you always end up with the currently displayed link left-aligned (or right-aligned for RTL languages) instead of possibly being sort of half in and half out of the viewable area. It'll still get chopped if it's longer than the available width, but at least the text you see will start in a logical place. I'll play around with it and see what turns up. :)


I just got around to trying this on a theme I have been playing with, and I have to say it works really well. Code is minimal, and these days we're all used to scrolling lists of stuff sideways on our phones. The images folder on Android is a perfect example. If you have sub-folders inside it, you get a scrollable horizontal list of your sub-folder names above the content.

Anyway, the guts of it is this:
.nav-breadcrumbs {
    display: flex;
    padding: 0 6px 0 0;
    font-size: 1.2rem;
    line-height: 3.2rem;
    overflow-x: auto;
    overflow-y: clip;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--bsf-dabac) var(--bsf-dabac);
    scrollbar-width: thin;
/*    ------------------  */
/*    Get cunning here.
/*    ------------------  */
.nav-breadcrumbs:hover {
    scrollbar-color: var(--bsf-libac) var(--bsf-dabac);
@media screen and (hover: none) {
    .nav-breadcrumbs {
        scrollbar-color: auto;
/*    ------------------  */
.nav-breadcrumbs li {
    flex: none;
    overflow: hidden;
    max-height: 3.2rem;
    scroll-snap-align: start;
.nav-breadcrumbs a {
    position: relative;
    display: block;
    padding: 0 1.8rem 0 .6rem;
    color: var(--bsf-metex);
.nav-breadcrumbs a::after {
    position: absolute;
    top: -.7rem;
    right: .3rem;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-width: 2.3rem 0 2.3rem 1.4rem;
    border-color: #0000 #0000 #0000 var(--bsf-mebac);
    filter: drop-shadow(.2rem 0 0 #000) drop-shadow(.1rem 0 0 var(--bsf-libor));

Some of that is eye candy, of course. The important bits are:

  • Flex makes sense for the parent ul, IMO.
  • overflow-x: auto; obviously gives you your scrolling. Auto is better than scroll, because it won't force a scrollbar on desktop when the width is more than adequate, but works the same as scroll on touchscreen.
  • overflow-y: clip; is necessary to stop your linktree moving vertically if you have anything (like groovy absolute-positioned arrow pseudos) extending above and below the anchors.
  • scroll-snap-type: x proximity; is my personal preference at this stage, but you can play with other options.
  • scrollbar-color can be used to make a desktop scrollbar invisible by default, changing to visible on hover, and resetting to user agent default on touchscreen.
  • scrollbar-width: thin; makes sense on desktop for this use case, IMO.
  • scroll-snap-align: start; seems to be the sanest option for that attribute. :)


Hey, this horizontal scrolling thingy works brilliantly with page numbers too. They tend to get messy when you have a lot of them on a phone. especially if someone has selected a font size larger than default. If you just let the thing scroll sideways it works well up to 200% of default font size (ie: maximum Firefox/Android font size).

On 2.1 all you have to do is cancel changing .pagelinks from flex to block, stop it wrapping, and give it some overflow and max-width settings. Bloody thing just works. If you expand a stack of pages by clicking the "..." span, no problem. They just appear in a neat line where you expect them to. You can even set your button styling to sane-for-touchscreen size, and it still just works.

#main_content_section .pagelinks {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;
.pagelinks a, .pagelinks > span {
min-width: 44px;
text-align: center;