RFC: Navigation once again

Let’s vote for a design pattern for future vertical navigation. We are also discussing the addition of the search bar that would improve the discoverability until the content redesign.
(Note: Please ignore colors and nav items from the masthead in the examples.)

1. Expandable (PF4 design)

  • expanding on the click
  • possibility to add third-level navigation (for less used items)
  • Patternfly 4 pattern (design system we want to use and that leads to consistency across the aplications)
  • current number of our secondary navigation items may result in longer scrolling (until the content navigation redesign)
  • takes less space, doesn’t cover the page content
    See & play here

2. Full-length panel flyout

  • basically, the same as there is right now
  • activation of the navigation on the click (no delay or accidental triggering), the rest will open on hover
  • deactivation either on timeout (when moving out of the panel) or clicking outside the panel
  • covers the page
  • selected secondary items are not visible when navigating out of the navigation
    See & play here
  • Expandable navigation
  • Full-length panel flyout triggered on a click
  • Other (please explain in a comment section)
0 voters

Expandable

Panel

Some of the related issues throughout the time:

5 Likes

I’d like to add another pain point for me…
The menu system (under 3.3.1, may have changed in later revs) does no honor “ctrl/command + click” to open items in a new tab. There are a number of times where I’m part way through updates, monitoring a host, etc and need to open another section. To open something from the menu in a new tab, it requires right clicking and selecting open in a new tab. Holding the control or command key (win/mac) does not affect the links from the menu.

2 Likes

Thanks for the feedback, we couldnt fix in the current nav but will fix it in the new navigation.

5 Likes

Some more thoughts:

=> The list can be very HUGE. If you e.g. click on Configure, and you scroll down the list, it would even display a browser scrollbar so that it can show the full list of entries. In case you are just searching for a specific menu item and you recognize, that the item is not in Configure, you need to scroll up again, “hide” Configure and then click on e.g. Hosts and you do the same again. I don’t think this make sense.

Maybe this is the case but I think its not a good reason to change the navigation. If you want to switch from one menu item to another, its OK that a lot space is used. Then you select what you want and the navigation is gone again.

In my point of view, clarify is on of the most important reasons. A user should see all possible menu items asap without scrolling years. :slight_smile:

If we would change the navigation, we should also think about how the navigation would look like on mobile devices.

1 Like

The menu as it is right now is pain in the ass (it covers things, sometimes it is not reacting, opening it by accident is annoying, … all of this was already mentioned). Also closing them by clicking into the wild is very annoying.

Expandable navigation looks promising, also scrolling in a long menu frame feels good as long as you have a scroll wheel (introduced late '90s) or use two fingers on touchpad.

However, the following comes to my mind when using expandable menu:

  • introducing unfold/collapse buttons to unfold/collapse all options (would be interesting for search an option via search (strg+f))
  • increase optical difference between menu points (Monitor, Content, …) and submenus for faster identifying different sections when having multiple submenus open
1 Like

It looks like I’m in the minority here, but I’ve voted Other because I like the current navigation. I’m quite pleased with how it works now.

I’ll add the note that I’m a Foreman user with very few plugins (notable, no Katello), so my menu is not that populated.

1 Like

I don’t mind the current behavior, IF there was a configurable delay from mousein to menu pop-out… As one of the original complaints stated, I just get wild with the mouse and I’d not mind in the least if I had to wait a second or two for the menu to pop-out, especially if I could tune it…

I too like the current menu very much. If the ctrl+click issue could be solved, which has been a pain point for some of my co-workers in the past, I would very much like to see the current behavior kept.
As a user with a lot of plugin installed, I am absolutely against the first option (expandable menu). I absolutely dislike having to scroll in menus, plus it adds a lot of additional clicking around, especially if you are looking for a certain feature and can’t remember exactly where in the menu it was placed.

2 Likes

After test-driving the proposed alternatives, I’m sure I like what we currently have as much - perhaps more; though, the ability to adjust how long it takes an expanded fly-out to hide would be welcome. I’m pretty happy with the current mouse-over delay that activates the fly-out, but having that as a configurable option would be okay as well. Not too fond of clicking to activate the fly-out. Just sharing my thoughts. Thank you to all for your hard work on a great product.

1 Like

I like the current nav, a customizable close delay would be all what’s needed in my view.

1 Like

Thank you everyone for providing your feedback.

Based on the results of the poll and user meetings, it has been determined that the majority of users prefer the expandable navigation.

The new navigation will be available in Foreman 3.8.

The ctrl+click issue is solved in the new navigation

The pull request for the navigation can be found here: https://github.com/theforeman/foreman/pull/9659

To resolve some of the issues we heard, we will be adding a search feature into the navigation, which is implemented in this pull request: DRAFT - search navigation by MariaAga · Pull Request #9681 · theforeman/foreman · GitHub

You’re welcome to check the Foreman nightly version once these changes have been merged to see them in action.
If you encounter any unexpected issues or have any concerns, please let us know.

2 Likes

Can’t wait on ctrl+clicking made available again :slight_smile: Thanks Maria for great news.

Awesome!
Thank you as well for the great news.

A little improvement I could see, this is how it looks in AWX:
image
Looks a lot cleaner if the padding is all part of the button:
image
Beside that, maybe the new borders :thinking: :
image

Oh and I’m not sure if my stable Forklift build is just broken or if it is not working, but Ctrl + Click as well as Middle-click are not working for me.

(Also looking forward to the search! Maybe a global shortcut like we talked on the devconf will make it in, would make switching around very easy :eyes: )

The PR for that is still open:

https://github.com/theforeman/foreman/pull/9759

Ah oh sorry for the noise then, thank you for the hint :slightly_smiling_face:

Yep that fixes the middle-click, really awesome work!
Btw, did the header bar get taller?

1 Like

Btw, did the header bar get taller?

Yes, its now 70px as defined in Patternfly, and not 60px as we defined it in the past

@MariSvirik What do you think about changing the seperator?
Current:


Without separators between navigation items (only separating title items)

3 Likes

Other: How about both options available and configurable per User?

1 Like

I’m not sure that we want to add more user configurability around this as it will be a large technical project to build and maintain and we dont have a lot of capacity.

1 Like