[ZBXNEXT-5569] Vertical menu to save space on big screens Created: 2019 Nov 14  Updated: 2024 Apr 10  Resolved: 2020 Apr 08

Status: Closed
Project: ZABBIX FEATURE REQUESTS
Component/s: Frontend (F)
Affects Version/s: None
Fix Version/s: 5.0.0alpha4, 5.0 (plan)

Type: Change Request Priority: Trivial
Reporter: Rostislav Palivoda Assignee: Alexander Shubin
Resolution: Fixed Votes: 7
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: GIF File Peek 2020-02-28 17-35.gif     GIF File Peek 2020-02-28 17-36.gif     GIF File Peek 2020-02-28 17-37.gif     GIF File Peek 2020-02-28 18-00.gif     GIF File Peek 2020-03-16 13-05.gif     GIF File Peek 2020-03-16 13-06.gif     GIF File Peek 2020-03-16 13-09.gif     GIF File Peek 2020-03-16 13-52.gif     GIF File Peek 2020-03-16 15-42.gif     GIF File Peek 2020-03-16 15-51.gif     GIF File Peek 2020-03-16 15-53.gif     GIF File Peek 2020-03-16 15-56.gif     GIF File Peek 2020-03-25 21-05.gif     GIF File Peek 2020-03-26 17-39.gif     PNG File Screenshot from 2020-04-01 11-29-28.png     PNG File Selection_006.png     PNG File Selection_010.png     PNG File Selection_019.png     PNG File Selection_020.png     PNG File Selection_022.png     PNG File Selection_023.png     PNG File Selection_035.png     PNG File Selection_036.png     PNG File Selection_037.png     PNG File Selection_038.png     PNG File Selection_039.png     PNG File Selection_040.png     PNG File Selection_041.png     PNG File Selection_042.png     PNG File Selection_092.png     PNG File Selection_093.png     PNG File Selection_953.png     PNG File Selection_954.png     PNG File Selection_955.png     PNG File Selection_956.png     PNG File Selection_959.png     PNG File Selection_960.png     PNG File Selection_961.png     PNG File Selection_963.png     PNG File Selection_964.png     PNG File Selection_965.png     PNG File Selection_966.png     PNG File flat-css3-breadcrumb.png     PNG File icons-misaligned.png     PNG File image-2020-03-05-12-31-31-517.png     PNG File image-2020-03-23-09-07-18-289.png     PNG File subissue_10.png     PNG File v_menu_compact.png     PNG File v_menu_compact_hovered.png     PNG File v_menu_compact_hovered_light.png     PNG File v_menu_expanded_2levels.png     PNG File v_menu_expanded_hidden.png     JPEG File zabbix_1280x1024.jpg     PNG File zbx-vertical-menu-resize_problem.png    
Issue Links:
Causes
causes ZBX-17583 Dashboard is not scrolled to the plac... Closed
causes ZBX-17827 Buttons and problems positioned incor... Closed
Team: Team D
Sprint: Sprint 60 (Jan 2020), Sprint 61 (Feb 2020), Sprint 62 (Mar 2020), Sprint 63 (Apr 2020)
Story Points: 3

 Description   

Summary

Current horizontal main menu is outdated by modern UI standards. Also it has few usability issues like consuming tons of space on wide screens and awkward navigation. It should be redesigned to have a vertical layout.

Acceptance

  1. Main menu must be redesigned to be displayed vertically on the left side and support three modes:
    1. Fully hidden
    2. Display icons only
    3. Display everything
  2. It must provide better usability comparing to the old menu
  3. It must be responsive

 Comments   
Comment by Glebs Ivanovskis [ 2019 Nov 15 ]

"Log Out" is dangerously close to a typical OS "Start" button position, isn't it?

Comment by Dimitri Bellini [ 2019 Nov 18 ]

Fantastic, I have suggested 3 years ago
I would like to suggest a "Expandable Breadcrumbs" like that for the main windows title: 

 

Comment by Stefan [ 2019 Dec 19 ]

somehow related? ZBXNEXT-1363

Comment by Alexander Shubin [ 2020 Mar 31 ]

Implemented in:

Comment by Dimitri Bellini [ 2020 Apr 01 ]

Using the Zabbix 5.0alpha4 there is a small visualization issue with the vertical Menu Bar and the main content check image (zbx-vertical-menu-resize_problem.png), the page is not resized correctly.

<larisa.grigorjeva> Hi, dimitri.bellini! Could you please tell us, didn't you enlarge your  standard fonts or browser zoom?

Comment by Dimitri Bellini [ 2020 Apr 01 ]

@larisa.grigorjeva i have tested on a 1280x1024 resoltion without zoon and scaling factor but we still have the "cosmetic issue". Keep in mind that most of customer do not have FullHD monitor

Attached screenshot (zabbix_1280x1024.jpg)

Thanks so much

PS: I still would like to suggest to use the "Breadcrumb" menu 

Comment by Alexei Vladishev [ 2020 Apr 02 ]

dimitri.bellini, the menu is not supposed to be open all the time. Just minimize (breadcrumb mode) it and you will be fine!

Comment by Dimitri Bellini [ 2020 Apr 02 ]

@Alexei ok i got you  about the breadcrumb i would mean the example in this picture (flat-css3-breadcrumb.png) and is relative to the top right corner of the main page. I think is useful to know where we are inside the Zabbix Menu for instance "Monitoring/Hosts" or "Configuration/Services" etc. Is not so important but is nice to see it

Comment by Alexander Shubin [ 2020 Apr 03 ]

Updated documentation:

Generated at Tue Apr 01 03:48:10 EEST 2025 using Jira 9.12.4#9120004-sha1:625303b708afdb767e17cb2838290c41888e9ff0.