Horizontal Menu
Horizontal Menu — No sidebar, top
nav bar with dropdown menus
What is the Horizontal Menu layout?
The vertical sidebar is replaced entirely by a horizontal navigation bar that sits below the topbar. Navigation items are arranged left-to-right with dropdown menus for sub-pages. The content area stretches the full viewport width with no sidebar gutter. This layout is familiar from traditional web applications and is often preferred for wide monitors or when the sidebar would feel too heavy for the content.
Modifier:
data-layout="horizontal"
on <html>
Shell:
display: flex; flex-direction: column
— single stack
Nav bar height: 44px, sticky below topbar
(
top: var(--topbar-h))
Dropdowns: Pure CSS hover dropdowns, no
JS required
Mobile: Nav bar becomes horizontally
scrollable strip
$284K
Total Revenue
1,842
Customers
5,219
Orders
3.42%
Conversion
All Layout Variants
Browse the full layout collection.