Responsive Design
Responsive Design
Verto's layout adapts across screen sizes using a set of defined breakpoints. Navigation elements, the sidebar, and the table of contents each respond independently, so the reading experience stays clean whether you're on a phone or a widescreen monitor.
Breakpoints
Three key breakpoints control how the layout shifts:
| Breakpoint | Width | What Changes |
|---|---|---|
| Small (below ~1024px) | < ~1024px | Sidebar hidden, mobile menu available, content fills the full width |
| Large (~1024px) | ≥ ~1024px | Sidebar appears as a permanent panel alongside the content area |
| Extra large (~1280px) | ≥ ~1280px | Table of Contents panel appears on the opposite side of the sidebar |
These aren't arbitrary. The large breakpoint gives enough room for a 260px sidebar plus readable content. The extra-large breakpoint adds space for the 220px table of contents without cramping the main column.
Below the large breakpoint, Verto collapses the sidebar entirely rather than shrinking it. This keeps mobile layouts uncluttered instead of forcing a cramped navigation panel onto a narrow screen.
Mobile Navigation
On smaller screens, the sidebar disappears. In its place, a hamburger icon in the top navbar opens a full-screen mobile menu.
How the Mobile Menu Works
When you tap the hamburger icon, an overlay slides in and covers the entire viewport. The menu displays centered links for Docs and Blog navigation, giving you a focused, distraction-free way to move between sections.
A few details about its behavior:
- Scroll lock. While the menu is open, the page behind it can't scroll. This prevents accidental content jumps.
- Keyboard dismissal. Pressing the Escape key closes the menu instantly. There's also a close button for tap-based dismissal.
- Backdrop overlay. The menu sits above all other content with a blurred background, so there's a clear visual separation between the menu and the page underneath.
Navbar
The navbar itself stays fixed at the top of the viewport across all screen sizes. Its height (57px) is consistent whether you're on mobile or desktop. On small screens, the hamburger icon appears in the navbar. On larger screens where the sidebar handles navigation, the icon hides.
Content Layout
The content area rearranges itself at each breakpoint to make the best use of available space.
Mobile (below ~1024px)
Content stretches to fill the full viewport width. No sidebar, no table of contents. The navbar at the top and the mobile menu handle all navigation. This gives small screens maximum reading area.
Tablet and Desktop (~1024px and above)
The sidebar locks into place on the left as a permanent, scrollable panel. Content sits to the right of it. The sidebar stays visible as you scroll through the page, so you can always see where you are in the documentation structure.
Wide Screens (~1280px and above)
The table of contents appears on the right side of the content area. It tracks your scroll position and highlights the current section heading, giving you a quick-jump overview of the page. The three-column layout (sidebar, content, table of contents) uses the full width without stretching the content column to an uncomfortable reading length.
Related
- Navigation covers the sidebar structure and how navigation data flows into the layout