Thinking on ways to solve BREADCRUMBS

Thinking on ways to solve BREADCRUMBS

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=kHL3gxAlvK8


Duration: 11:28
14,873 views
550

In today's GUI challenge, we're building a breadcrumbs component.. with a twist! Instead of a linear list of links, this breadcrumbs component exposes all of it's siblings in a dropdown, allowing fast traversal of your site's architecture.

Chapters:
0:00 - Introduction
0:23 - Demo
1:56 - Layouts
4:13 - Debugging corner
5:25 - Mobile UX
6:17 - Reduced motion
7:34 - JavaScript
10:38 - Outro

Resources:
Read along → https://goo.gle/2TbySnq
Try a demo → https://goo.gle/3ktEAwj
Get the source → https://goo.gle/3n4Sfcg

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2021-08-11First-party sets | What is the Privacy Sandbox?
2021-08-11Thinking on ways to solve SWITCHES
2021-08-05Core Web Vitals best practices (Italian with English subtitles)
2021-08-04web.dev Internationalization (Polish with English subtitles)
2021-08-03Debugging memory leaks - HTTP 203
2021-07-28Trust tokens | What is the Privacy Sandbox?
2021-07-27HTTP 203: Season 8 trailer
2021-07-235 tips for your Progressive Web App (Chinese with English subtitles)
2021-07-15Chrome 92 - What’s New in DevTools
2021-07-15Improving CLS by optimizing ad delivery (French with English subtitles)
2021-07-14Thinking on ways to solve BREADCRUMBS
2021-07-08Introduction to Web Stories (Swiss German with English subtitles)
2021-07-01A good cookie recipe (French with English subtitles)
2021-06-24Core Web Vitals: An everyday explanation (Taiwanese with English subtitles)
2021-06-22Top 10 performance pitfalls - HTTP 203
2021-06-17What is the state of web frameworks in India (Hindi with English subtitles)
2021-06-10Advanced patterns for Progressive Web Apps (Spanish with English subtitles)
2021-06-09Thinking on ways to solve COLOR SCHEMES
2021-06-08From nothin’ to gzip - HTTP 203
2021-06-03Deep dive into the PWA install flow
2021-05-27Web Audio API 드럼머신 만들기 (Korean with English subtitles)


Tags:
GDS: Yes
thinking on ways to solve breadcrumbs
solve breadcrumbs
breadcrumbs
breadcrumbs component
breadcrumbs tutorial
how to use breadcrumbs
what are breadcrumbs
gui challenges
chrome gui challenges
gui challenges chrome
css
developer
developers
chrome developer
chrome developers
google developers
google chrome developers
google
Adam Argyle