Three tabs or fewer go across the top. More than three go down the side. The rule, why it works, and how to get AI to follow it
One or two lines per step, and a prompt that makes Claude or Cursor wait until step eight
Use a horizontal navigation bar when you have three tabs or fewer, and a vertical bar down the side when you have more than three. People scan a screen from top to bottom, so a long row across the top makes them work harder, while a side bar with only three items wastes space.
Because your eyes read a screen from top to bottom. A long row makes people scan left to right and drag the cursor across the page to find what they need. Five items stacked down the side can all be seen in one look
Go vertical. Once you are past three, a side bar holds the list better and leaves room for the next item you add
Because AI builds whatever layout you describe and will not push back. Decide the navigation in the design first, then give the model the rule
The same idea in a short video. It plays here, and nothing loads until you press play
Three tabs or fewer go horizontal, across the top of the page. More than three go vertical, down the side. Even at four, keep it vertical.
When you look at a screen, your eyes mostly move from top to bottom, and they rest on one part of it at a time. A short row of three across the top sits right where you look first, and you can take it in at once.
A long row across the top makes you read left to right and move the cursor across the whole screen to reach the last tab. That is tiring, and it looks cramped. A vertical list lets you see every option in one look. The opposite mistake is a side bar with only three links in it, which leaves a column of empty space down the page for no reason. That is why short lists belong at the top.
In the design, before anyone writes code. If a client wants seven tabs in a horizontal bar, the time to have that conversation is before the build, with the reason ready. Changing the navigation after the pages are built means touching every page.
This is one of the small things designers learn early and AI never brings up on its own. It will build a horizontal bar with nine items if you ask for one.
Put the rule in your prompt or your design notes, in plain words: "Use a top navigation bar for three items or fewer, and a left side bar for four or more." Then check the result on a phone, where both usually collapse into a menu, and make sure the most used item is still the easiest one to reach.
For the bigger picture of what to decide before you build, read the 13 things you do before you build your app.
One or two lines per step, and a prompt that makes Claude or Cursor wait until step eight
1 min readYou’ll leave the call knowing what’s risky and what to do next
