We all know what a hamburger menu is, right? When the pattern started making its way into web designs, it was both mocked and applauded for its minimalism that allows main menus to be tucked off screen, particularly on mobile …
Oh, the Many Ways to Make Triangular Breadcrumb Ribbons
Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might …
The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there are cases when the best possible way of presentation …
W3C’s CSS Working Group often gives us brilliant CSS features to experiment with. Sometimes we come across something so cool that sticks a grin on our face, but it vanishes right away because we think, “that’s great, but what do …
Just like the title says! Here’s a sidebar navigation bar that…
Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage. It’s an impressive menu with some slick animation effects and the combination of these three tools can make …
Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.
There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just …
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.
Let’s see if we can make one of these menus with CSS alone.
I saw a Dribbble shot the other day by Eli Brumley that had a cool interactive effect. A simple circular blue button, when clicked, expands into a small menu itself. I fired up Professor Mode on CodePen to let people …
I saw an interesting take on off-canvas navigation the other day over on The New Tropic. It wasn’t the off-canvas part so much. It was how the elements within the nav took up space. They stretched out to take …
The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the “Priority+ Navigation” concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking …
