From the first minute… I think of them less as a “history of where you’ve been” and more of a “hierarchy of where you are”. This is important, particularly when landing from a search result, for example, in case you as a user would like to broaden back out and go “up” and find more stuff related to what you’re currently looking at (e.g. product category? Company information? Etc)
Yeah, I agree with you. Coming from a search engine and then not having a way to go to the parent category easily is really a pain. It's possible to kinda do both things, give the breadcrumbs of the default of where the product is when coming from search and then otherwise doing them with how the user got there. But it does cause some issues. Like, recommended links on a page for other content. And then how do you handle a user going to another category that's in a different tree? Add that next? Or replace what was there with the default path from home?
@@Aragorn450 I don’t fully understand the issue that you’re posing, so I’ll do my own interpretation… first I’ll disambiguate: The term “breadcrumbs” for this sort of UI is a bit of a weird name, since it was originally used as a metaphor about something a user could do to remember _where they came from_ (I.e. dropping breadcrumbs so they can find their way back home). Instead, I think of it as more of a navigation hierarchy to instead *inform* the user about _where they are_ (which _may_ need to incorporate user-specific context about where they came from, but see below for that). Now, *my interpretation* from what you’re asking is: How do you handle situations where you have a page/product that can exist in multiple places? Maybe it has the same URL (what I’d refer to as the canonical URL, also the technical term, see the link HTML tag) but you may want to *adjust* this navigation UI to be more context appropriate based on what the user did. In that case, you should find a way to “maintain state”. This can often be done with query string parameters or with cookies and varies *widely* on some important details about your stack. Personally, I’d generally recommend using the query string and just ensure you always have a canonical meta tag pointing to the *canonical* version of your current page to prevent duplicate content issues for SEO purposes.
Looks pretty cool. I would disagree that a user wants to see the current site on mobile. He is on the site already, wouldn't the page before be more relevant to him?
That snap layout is nice, never new that existed. As well as clicking that FLEX icon in the dev tools, always kinda wondered what that was for. Super nice! Wonder how it would look if you completely transform the UI to an icon version one. Ive made an implementation of that on a site i worked on. Quite nice, the navigation transform in this Mobile device UI with icons only and then flips to the bottom for easy access.
@@RomboutVersluijs i see the mobile menu at the bottom, you're wondering if it's be nice to transform the breadcrumbs into an icon centric bottom nav? that could be cool sure! would it overflow scroll when the crumbs are too many? sounds worth a prototype 🙂
Indeed, some users prefer there to be no animations; it's primarily for accessibility since for example, on-screen animations could induce motion sickness or some other discomfort for some people. It's not necessarily just preference because this discomfort could stem from a disorder, though perhaps a few users also prefer the interface to immediately change with no fancy animations
Correction: ruclips.net/video/kHL3gxAlvK8/видео.html Firefox does support simulating color scheme as of v87. www.mozilla.org/en-US/firefox/87.0/releasenotes/
Both styles are used. From the name alone it’s more like “last x screens visited” but especially if you work with sibling selectors it’s more usually used as a navigation indicator (parents path to root).
Ow wow, i thought the breadcrumb script would actually look at the omnibox see what the url is and then build the breadcrumbs hierarchy accordingly. How does your breadcrumbs script react to that then? PS in the link to the example/demo page, i dont see the script you showed in the video?
Killyspudful… please be nice. I personally think it’s pretty impressive Owen has managed to build such solid tech skills between film shoots (…and now TV too! p.s. if you read this Owen, you were my favourite character in Loki and also I think Midnight in Paris is a massively underrated film too)
From the first minute… I think of them less as a “history of where you’ve been” and more of a “hierarchy of where you are”. This is important, particularly when landing from a search result, for example, in case you as a user would like to broaden back out and go “up” and find more stuff related to what you’re currently looking at (e.g. product category? Company information? Etc)
Yeah, I agree with you. Coming from a search engine and then not having a way to go to the parent category easily is really a pain. It's possible to kinda do both things, give the breadcrumbs of the default of where the product is when coming from search and then otherwise doing them with how the user got there. But it does cause some issues. Like, recommended links on a page for other content. And then how do you handle a user going to another category that's in a different tree? Add that next? Or replace what was there with the default path from home?
@@Aragorn450 I don’t fully understand the issue that you’re posing, so I’ll do my own interpretation… first I’ll disambiguate: The term “breadcrumbs” for this sort of UI is a bit of a weird name, since it was originally used as a metaphor about something a user could do to remember _where they came from_ (I.e. dropping breadcrumbs so they can find their way back home). Instead, I think of it as more of a navigation hierarchy to instead *inform* the user about _where they are_ (which _may_ need to incorporate user-specific context about where they came from, but see below for that).
Now, *my interpretation* from what you’re asking is: How do you handle situations where you have a page/product that can exist in multiple places? Maybe it has the same URL (what I’d refer to as the canonical URL, also the technical term, see the link HTML tag) but you may want to *adjust* this navigation UI to be more context appropriate based on what the user did. In that case, you should find a way to “maintain state”. This can often be done with query string parameters or with cookies and varies *widely* on some important details about your stack. Personally, I’d generally recommend using the query string and just ensure you always have a canonical meta tag pointing to the *canonical* version of your current page to prevent duplicate content issues for SEO purposes.
This is so good! It's become like a 'dynamic' navbar instead of a plain breadcrumb, I guess?
Looks pretty cool. I would disagree that a user wants to see the current site on mobile. He is on the site already, wouldn't the page before be more relevant to him?
Wohooooo.... That's awesome man.... thanks for sharing it.. loved it.. ❤
Oh god, when can i reach this pro level at web developing😪, btw i like this breadcrumb design👍
Why did you set opacity: 0.01 instead of opacity: 0 for the disguised select?
Small correction. Breadcrumbs aren't supposed to reflect where you've been. That's what the back button does. They reflect content hierarchies.
That snap layout is nice, never new that existed. As well as clicking that FLEX icon in the dev tools, always kinda wondered what that was for. Super nice!
Wonder how it would look if you completely transform the UI to an icon version one. Ive made an implementation of that on a site i worked on. Quite nice, the navigation transform in this Mobile device UI with icons only and then flips to the bottom for easy access.
send me a url to peep!?
@@AdamArgyleInk and... whats the verdict?
@@RomboutVersluijs did you send me a link to look at?
@@AdamArgyleInk ai RUclips deletes messages a lot of times when they have a link in the comment
its promotiespullen com
@@RomboutVersluijs i see the mobile menu at the bottom, you're wondering if it's be nice to transform the breadcrumbs into an icon centric bottom nav? that could be cool sure! would it overflow scroll when the crumbs are too many? sounds worth a prototype 🙂
This is amazing
Amazing! Please mention the icon library !
I would like to see a checklist of all the factors you find important. Like motionOk??? never thought motion wasn't ok.
he showed a link??!?! goo.gle/Breadcrumbs
Indeed, some users prefer there to be no animations; it's primarily for accessibility since for example, on-screen animations could induce motion sickness or some other discomfort for some people. It's not necessarily just preference because this discomfort could stem from a disorder, though perhaps a few users also prefer the interface to immediately change with no fancy animations
This guy roasts Firefox dry
Awesome 😎
Correction: ruclips.net/video/kHL3gxAlvK8/видео.html
Firefox does support simulating color scheme as of v87.
www.mozilla.org/en-US/firefox/87.0/releasenotes/
I thought breadcrumbs were there to show the structure and location where you are in a site. Not immediatly the history of how you got there.
Both styles are used. From the name alone it’s more like “last x screens visited” but especially if you work with sibling selectors it’s more usually used as a navigation indicator (parents path to root).
What's this font and theme 🤯🤯 looks so good
Dank Mono and Kung Fury!
I liked IDE's theme. Whats t name?
Kung Fury
@@AdamArgyleInk Tks!
Ow wow, i thought the breadcrumb script would actually look at the omnibox see what the url is and then build the breadcrumbs hierarchy accordingly. How does your breadcrumbs script react to that then? PS in the link to the example/demo page, i dont see the script you showed in the video?
ow it actually is, its minified and looked a bit different my bad!
Wow
The nav has many problem.
Kermit the Frog builds a UI
Killyspudful… please be nice. I personally think it’s pretty impressive Owen has managed to build such solid tech skills between film shoots (…and now TV too! p.s. if you read this Owen, you were my favourite character in Loki and also I think Midnight in Paris is a massively underrated film too)
lol! maybe i'll lean into this and go full kermit in an intro hehe