starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Allow selection of horizontal UI rather than vertical (tabler) #9955

New Issue
Closed
opened 2025-12-29 21:24:54 +01:00 by adam · 5 comments
adam commented 2025-12-29 21:24:54 +01:00
Owner
Copy Link

Originally created by @ghost on GitHub (Jul 8, 2024).

NetBox version

v.4.0.6

Feature type

New functionality

Proposed functionality

With the recent move to tabler UI, the vertical menu option was implemented.
https://preview.tabler.io/layout-vertical.html

Since the framework is now handled through tabler, I'd like to request the possibility of adding an option to select the horizontal UI option.
https://preview.tabler.io/layout-horizontal.html

Use case

The horizontal UI is easier to navigate (in my opinion) and allows more vertical screen real estate to display netbox tables/info.

Database changes

Possible database change to allow for the new setting, either globally or per user.

External dependencies

Tabler.

Originally created by @ghost on GitHub (Jul 8, 2024). ### NetBox version v.4.0.6 ### Feature type New functionality ### Proposed functionality With the recent move to tabler UI, the vertical menu option was implemented. https://preview.tabler.io/layout-vertical.html Since the framework is now handled through tabler, I'd like to request the possibility of adding an option to select the horizontal UI option. https://preview.tabler.io/layout-horizontal.html ### Use case The horizontal UI is easier to navigate (in my opinion) and allows more vertical screen real estate to display netbox tables/info. ### Database changes Possible database change to allow for the new setting, either globally or per user. ### External dependencies Tabler.
adam added the type: featurestatus: under review labels 2025-12-29 21:24:54 +01:00
adam closed this issue 2025-12-29 21:24:55 +01:00
adam commented 2025-12-29 21:24:55 +01:00
Author
Owner
Copy Link

@jeffgdotorg commented on GitHub (Jul 10, 2024):

Thanks for your interest in improving NetBox!

I want to point out that, while it's nominally a one-line change to switch the nav layout to horizontal, implementing it in my v4.0.7 lab system seems to surface a few quirks that would need sorting out. For example, the Add and Import UI elements in the nav menu remain hidden until the user hovers directly over them (see screenshot) whereas in the vertical layout they are revealed upon hovering anywhere in the object type's row.

image

That said, I've moved this issue to needs owner status. If you're interested in working it through to a PR, please leave a comment to that effect and a maintainer will assign it to you for implementation. Otherwise, another developer with the necessary skills and capacity can pick it up.

@jeffgdotorg commented on GitHub (Jul 10, 2024): Thanks for your interest in improving NetBox! I want to point out that, while it's nominally a one-line change to switch the nav layout to horizontal, implementing it in my v4.0.7 lab system seems to surface a few quirks that would need sorting out. For example, the Add and Import UI elements in the nav menu remain hidden until the user hovers directly over them (see screenshot) whereas in the vertical layout they are revealed upon hovering anywhere in the object type's row. ![image](https://github.com/netbox-community/netbox/assets/1209268/9179ff6e-72e7-4d10-9541-b6477f15f7b9) That said, I've moved this issue to `needs owner` status. If you're interested in working it through to a PR, please leave a comment to that effect and a maintainer will assign it to you for implementation. Otherwise, another developer with the necessary skills and capacity can pick it up.
adam commented 2025-12-29 21:24:56 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Jul 10, 2024):

Horizontal navigation would be untenable on all but the largest screens, especially with plugins installed. It also greatly complicates overall UI design, as the menu would need to remain sticky at the top so as to remain accessible after scrolling.

The horizontal UI is easier to navigate (in my opinion) and allows more vertical screen real estate to display netbox tables/info.

In what way is it easier to navigate? Visually, vertical lists are much more easily scanned and read. And I assume you mean horizontal screen space? #16392 would address this by implementing a collapsible menu.

@jeremystretch commented on GitHub (Jul 10, 2024): Horizontal navigation would be untenable on all but the largest screens, especially with plugins installed. It also greatly complicates overall UI design, as the menu would need to remain sticky at the top so as to remain accessible after scrolling. > The horizontal UI is easier to navigate (in my opinion) and allows more vertical screen real estate to display netbox tables/info. In what way is it easier to navigate? Visually, vertical lists are much more easily scanned and read. And I assume you mean horizontal screen space? #16392 would address this by implementing a collapsible menu.
adam commented 2025-12-29 21:24:56 +01:00
Author
Owner
Copy Link

@ghost commented on GitHub (Jul 10, 2024):

Horizontal navigation would be untenable on all but the largest screens

Maybe, but equally undesired if your window is maximized on a 49" screen is to have to click a button all the way on the right side of the screen, then go allll the way over to the left side of the screen across 4000 pixels to the nav bar.

the menu would need to remain sticky at the top so as to remain accessible after scrolling

This is already implemented in tabler. https://preview.tabler.io/layout-navbar-sticky.html

In what way is it easier to navigate? Visually, vertical lists are much more easily scanned and read. And I assume you mean horizontal screen space? #16392 would address this by implementing a collapsible menu.

Part of the 'easier to navigate' statement had to do with the tabler preview's 'light' theme rather than grey on blue of the current 'dark' vertical nav UI.

We could possibly have a middle ground by allowing a selection of tabler's 'vertical transparent' which seems to keep the vertical nav, but with a lighter theme rather than the sometimes hard to read dark theme.
https://preview.tabler.io/layout-vertical-transparent.html

@ghost commented on GitHub (Jul 10, 2024): > Horizontal navigation would be untenable on all but the largest screens Maybe, but equally undesired if your window is maximized on a 49" screen is to have to click a button all the way on the right side of the screen, then go allll the way over to the left side of the screen across 4000 pixels to the nav bar. > the menu would need to remain sticky at the top so as to remain accessible after scrolling This is already implemented in tabler. https://preview.tabler.io/layout-navbar-sticky.html > In what way is it easier to navigate? Visually, vertical lists are much more easily scanned and read. And I assume you mean horizontal screen space? #16392 would address this by implementing a collapsible menu. Part of the 'easier to navigate' statement had to do with the tabler preview's 'light' theme rather than grey on blue of the current 'dark' vertical nav UI. We could possibly have a middle ground by allowing a selection of tabler's 'vertical transparent' which seems to keep the vertical nav, but with a lighter theme rather than the sometimes hard to read dark theme. https://preview.tabler.io/layout-vertical-transparent.html
adam commented 2025-12-29 21:24:56 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Jul 10, 2024):

Maybe, but equally undesired if your window is maximized on a 49" screen

Your example cites a (very unlikely) extreme, whereas I am concerned with the majority (common screen sizes).

This is already implemented in tabler.

Yes, but there remain issues with it, such as accounting for the navigation menu height when navigating within a page. We (mostly) avoid this with the minimal top bar in place currently. It also consumes additional vertical space, as the search bar and user menu necessitate a second row.

Part of the 'easier to navigate' statement had to do with the tabler preview's 'light' theme rather than grey on blue of the current 'dark' vertical nav UI.

Ok, so if a horizontal menu isn't easier to navigate, let's omit that from the FR's cited use case. That leaves only your second point:

allows more vertical screen real estate to display netbox tables/info.

which as I noted above would be addressed by #16392. That doesn't leave any justification for implementing a horizontal navigation menu.

@jeremystretch commented on GitHub (Jul 10, 2024): > Maybe, but equally undesired if your window is maximized on a 49" screen Your example cites a (very unlikely) extreme, whereas I am concerned with the majority (common screen sizes). > This is already implemented in tabler. Yes, but there remain issues with it, such as accounting for the navigation menu height when navigating within a page. We (mostly) avoid this with the minimal top bar in place currently. It also consumes additional vertical space, as the search bar and user menu necessitate a second row. > Part of the 'easier to navigate' statement had to do with the tabler preview's 'light' theme rather than grey on blue of the current 'dark' vertical nav UI. Ok, so if a horizontal menu _isn't_ easier to navigate, let's omit that from the FR's cited use case. That leaves only your second point: > allows more vertical screen real estate to display netbox tables/info. which as I noted above would be addressed by #16392. That doesn't leave any justification for implementing a horizontal navigation menu.
adam commented 2025-12-29 21:24:56 +01:00
Author
Owner
Copy Link

@ghost commented on GitHub (Jul 10, 2024):

Fair, I'll close this and open another FR to address the light vs dark for the navbar only.

@ghost commented on GitHub (Jul 10, 2024): Fair, I'll close this and open another FR to address the light vs dark for the navbar only.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: under review type: feature
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#9955
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?