Articles Tagged navigation

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 see in a hierarchical breadcrumb navigation.

You’ve probably seen this pattern a lot. It comes up often in things like multi-step forms and site breadcrumbs. For our purposes we’re going to call these “ribbons" so we know what we’re referring … Read article

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 means creating a list.

Depending on the amount of data and its content, we may decide to show all content at once (very rarely), or show only a specific part of a bigger data set (more likely). The main reason … Read article

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 I do with it?” The element() function was like that for me. It’s a CSS function that takes an element on the page and presents it as an image to be displayed on screen. Impressive, but quixotic.… Read article

Just like the title says! Here's a sidebar navigation bar that...

1. Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible.
2. Scrolls smoothly to the sections you click to.
3. Activates the current nav based on scroll position (it's a single page thing).

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 it relatively easy to recreate.… Read article

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 need to pick the best for the case you are trying to solve. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website…… Read article

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 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 up all the space, when available, but never squished too far. Those are concepts that flexbox makes pretty easy to express! Let's dig in a little.… Read article

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 and creation of a design pattern, especially when it's working out there in the real world.… Read article

The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to:

• Code much, much less XHTML
• Separate website formatting from content
• Control as much of the website theme/design as the developer allows himself with one CSS file
• Easily adapt website display to the user instead of the user adapting to the website
• Change the display of our website for specific devices and