The Elements of UI Engineering
Navigation<p>Whenever we can&#x27;t fit everything on the screen at once, we use some of the patterns below:<p>- scroll view<p>- virtualized list<p>- tabs<p>- drawer<p>- master-detail<p>- page navigation<p>- modal navigation<p>- alert<p>- tooltip<p>- combo box<p>- collapsible<p>- carousel<p>- gallery<p>It wouldn&#x27;t make sense to use any of these patterns if we had ∞ sized displays.<p>Would you call all of the above patterns &quot;navigation&quot;? Why not? Isn&#x27;t navigation just a way to reach content that isn&#x27;t immediately accessible? Why don&#x27;t you think of scrolling through a list as some sort of navigation? I think you should.<p>It really helps to re-frame all of the above patterns as simple layout strategies. Layouting is about putting content where it belongs. Whether that content is visible or not (covered, collapsed, out of bounds) doesn&#x27;t really matter.<p>Let&#x27;s consider the classic master-detail example that so many people struggle with:<p><pre><code>  Tablet (stacked on X axis)

  +-----+---------+
  |     |         |
  |  M  |    D    |
  |     |         |
  +-----+---------+

  --------X--------

  Phone (stacked on Z axis)

       +-----+       
  +-----+    |      &#x2F;
  |     | M  |     &#x2F;
  |  D  |    |    Z
  |     |----+   &#x2F;
  +-----+       &#x2F;
</code></pre>
The only difference between these two examples is the stacking axis. That&#x27;s it. It&#x27;s the only thing that should change when resizing a window. You don&#x27;t need to recreate a completely new layout using frames and pages and what not. Re-framing the problem just makes everything much easier. Navigation is just layouting.