Broadly speaking, anything telling users where they are, where to go and how to get there can be called navigation. We abstract common navigation patterns and provide handy components to help designers and developers build a clear and smooth navigational system. When using navigation or customizing navigational structures, please pay attention to following common pitfalls:
- Minimize page transitions (i.e. reduce the number of page transitions required by a task from several to just once or twice), to ensure that the user travels only a short distance from one page to another
<td>Hierarchy is easily extensible; Makes room for page content horizontally; Allows fixed position, so that user can navigate to intended page quickly.</td>
<td>Conforms to common human habit of browsing top-down, easy to browse and click; Content area usually stays in a fixed width (i.e. 1208px), so page layout is more stable and less sensitive to screen sizes.</td>
<td>Sensitive to screen sizes because content area usually resides in a Grid.</td>
<td>At present, most monitors are widescreen, so top navigation occupies a large area of valuable vertical space while waste a lot of horizontal space; Number and title length of menu items are limited.</td>
</tr>
<tr>
<th>Summary</th>
<td>Suitable for multi-level, operation intensive and dashboard-like web apps.</td>
<td>Suitable for landing pages and consumer facing web apps.</td>
</tr>
</Table>
We categorize common navigation patterns into side and top navigations. Either has its own pros and cons, and should be chosen accordingly.
Examples for reference [Commonly Used Layout](/docs/spec/layout#docs-spec-layout-demo-top)。
