Horizontal Menu Layout
The same shell with navigation across the top instead of down the side.
Revenue
$0K
12.4%vs last month
Active Users
0
3.1%vs last month
Deployments
0
2.2%vs last month
Uptime
0%
0.01%vs last month
Revenue Growth
Monthly recurring revenue
About this layout
The sidebar is hidden and the same menu data is rendered as a horizontal bar under the header. Nothing else changes: the header, footer, theme handling and command palette are identical.
How it is switched on
<body data-nx-layout="app"
class="nx-layout-horizontal">The class hides .nx-sidebar and drops the left margin on .nx-main. Below 992px the bar scrolls horizontally rather than wrapping, so it stays one line tall.
When to pick which
| Consideration | Vertical sidebar | Horizontal bar |
|---|---|---|
| Number of top-level items | Handles 30+ comfortably | Best under 8 |
| Vertical space for content | Unchanged | 48px less |
| Horizontal space for content | 260px less | Full width |
| Deep nesting | Natural | Needs dropdowns |
| Best for | Dense admin tools | Focused apps and reporting views |