A great way to use when a process (ie. process of a purchase) needs to be introduced to the user.
I wanted to have an arrow-styled breadcrumb menu that is mobile-first and responsive with a continuous gradient color. Not as trivial as it first seems.
The concept of the square-shaped pseudo elements as arrows is based on this code: http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation - but I refactored it to create my responsive version. On mobile screen widths, the elements stack nicely and the arrows are still present.
- designed and built to be mobile-first & responsive. My responsive breakpoint here is 768px min-width.
- HTML5 + CSS3