MenusLesson 6Free preview

Vertical Tabs

This lesson is part of How To · All levels

Summary

This lesson reviews the design of Vertical Tabs. Unlike conventional tabs that line horizontally above, vertical tabs place the menu bar on the left and the content panel on the right, perfect for administrative dashboards and large desktop screens.

Key points

The tab button bar is set vertically with float: left or CSS Flexbox
The contents of the tab are placed on the right side with flexible width
Apply proportional column partitioning (e.g. tab 20%, content 80%)
JavaScript logic remains similar to horizontal tabs: hide everything, display the target

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.