Skip to content

Define a pattern for navigating between dashboards and boards

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

I recently worked on the following page when I first encountered the need for switching between entities (in this case it's a dashboard) without a navigation element to pick these entities from (ie a list of dashboards like we have a list of issues).

I don't know what to call this type of navigation, perhaps lateral navigation? 🤔

image

In places like dashboards and issue boards, using space efficiently is paramount. That's why I wanted to explore ways of combining the title with the selection of dashboards. Here are some mockups I made quickly:

Title selector Selector aligned with title
Title_dropdown-1 Title_dropdown

The first one is more aligned with what I'm trying to do here. As I worked on Beautifying UI, I inherited some work from the previous milestone - issue boards header improvements. There too is a similar selector. In that case, no title is present which doesn't work well for the page's hierarchy. Some concepts from that discussion:

image

image

@katiemacoy was the designer working on these and she wrote for the second mockup:

I would expect to see all boards in a list like the issue list. I would expect a page in Issues > Boards. Therefore I have removed change board functionality

From replies, I noticed that @uhlexsis was thinking about the same thing as I was, how to combine the title with a selector to navigate between boards:

image

And here's another, more detailed exploration from Nick Post who was the designer on Optimise:

Title dropdown Hover Open
01 02 03
Edited by 🤖 GitLab Bot 🤖