Left arrowCollapsible Navigation
Console

Collapsible Navigation

Designing and building an intuitive collapsible navigation

Background

As Console began to mature as a product, we knew our users would begin pushing the boundaries of our interface. In particular, shrinking the window size would quickly reveal a inflexible UI.

Brief

My challenge was to build a collapsible navigation that would allow the primary content to breathe a bit more while also giving the user easy access to site navigation without having to toggle the panel every time.

Research

The first thing I did was look for tools that already did a good job of crafting the interaction that we wanted. Two that came to mind were Linear and Notion. However, as I started to look into their implementation, I realized there were some aspects of it that I thought we could do better.

The first thing I noticed was that Linear didn't give any intuitive option for collapsing their navigation. You either had to shrink your window size or know to hover between the navigation and the content to reveal a resizing handle which you could drag all the way to the left to collapse the navigation fully.

And while Linear did a fantastic job of making the interaction feel natural, snappy and fluid, the second thing that bugged me was that when I would hover over the "Expand navigation" icon, the hover state would capture the entire screen, blocking my interaction with the icon itself.

Notion, on the other hand, did a great job of letting me interact with the icon directly while also maintaining some wider hover targets but the floating navigation felt disconnected from the rest of the interface since it floated over the top of everything else without aligning with any anchor points.

Iteration

With those details in mind, I started by designing the collapsed and expanded states. There was no reason to reinvent the wheel, so I was able to quickly mock something up that we were happy with. We wanted to lean toward clarity over cleverness so we made the collapse/expand icons obvious, adding tooltips explaining the function on hover.

Hovering over the "expand" button would slide a navigation panel out from the left side of the screen temporarily to allow the user to quickly navigate. To help this temporary panel feel like it belongs to the rest of the interface, I decided to lock into place just beneath the brow and dim and blur the rest of the screen to draw the user's eye towards it.

While a simple collapse/expand/hover functionality would be relatively straightforward, I knew the magic of the interaction would be in the implementation.

  • Would it appear/disappear when you expected it to?
  • Would it look like a cohesive part of the interface or bolted on like a last minute decision?
  • Would it feel snappy and fluid?

To ensure that the hover interaction would work as expected, I drew out the hover targets that would feel intuitive to interact with. In its closed state, the hover targets would expand around the icon slightly as well as extend down the left side of the chrome. This gave the user a larger margin of error when moving their cursor to the left side or top-left corner of the screen. While hovering, the hover target would expand from the top left corner down to the top-right corner of the navigation panel so the hover interaction wouldn't break if the user moved their cursor toward the settings icon.

Implementation

Finally, it was time to build.

Since the interactions spanned multiple components (navigation, brow, chrome etc.), I managed the expanded/collapsed state in our global store and used Framer Motion to animate the panel's entrance/exit.

There were a handful of smaller details that I needed to get right in order for the interaction to feel natural:

  • Hover Targets — I built the dynamic hover targets using a combination of absolutely positioned divs and SVGs controlled by the global store.
  • Auto-collapse/expand — To round out a fluid experience, I used a hook to listen for window resizing and auto-collapsed or expanded the navigation panel when the window reached certain breakpoints giving the feeling that the product understood and adapted to the user's intent.
  • Collapse Delay — When moving your mouse toward the left side of the screen to trigger the pop-out navigation, sometimes you overshoot your target, moving your mouse past the hover target which quickly expands and then immediately collapses the navigation giving a jolting visual effect that didn't feel fluid. To remedy this, I added a half-second delay if your cursor moved out of the viewport to give the user time to move their cursor back over a hover target before collapsing the navigation.

The result was a fluid and intuitive navigation that felt like it responded to and even anticipated your intent giving users the ability to full-screen their data-heavy pages for the best user experience without losing their ability to navigate the product.