2021-09-17 00:18:50 +08:00
|
|
|
---
|
|
|
|
|
title: Navigation
|
2021-10-22 19:32:39 +08:00
|
|
|
lang: en-US
|
2021-09-17 00:18:50 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.image-wrapper {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
background-color: rgb(249, 250, 252);
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
# Navigation
|
|
|
|
|
|
|
|
|
|
Navigation focuses on solving the users' problems of where to go and how to get
|
|
|
|
|
there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.
|
|
|
|
|
|
|
|
|
|
## Choose the right navigation
|
|
|
|
|
|
|
|
|
|
An appropriate navigation gives users a smooth experience, while an inappropriate
|
|
|
|
|
one leads to confusion. Here are the differences between sidebar navigation and
|
|
|
|
|
top navigation
|
|
|
|
|
|
|
|
|
|
## Side Navigation
|
|
|
|
|
|
2021-12-21 09:35:24 +08:00
|
|
|
Affix the navigation at the left edge, thus improves its visibility, making it
|
2021-09-17 00:18:50 +08:00
|
|
|
easier to switch between pages. In this case, the top area of the page holds
|
|
|
|
|
commonly used tools, e.g. search bar, help button, notice button, etc. Suitable
|
|
|
|
|
for background management or utility websites.
|
|
|
|
|
|
|
|
|
|
### Level 1 categories
|
|
|
|
|
|
|
|
|
|
Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.
|
|
|
|
|
|
|
|
|
|
<div class="image-wrapper">
|
|
|
|
|
<img src="/images/navbar_1.png" alt="level 1">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
### Level 2 categories
|
|
|
|
|
|
|
|
|
|
Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in
|
|
|
|
|
combination of second level navigation, making it easier for the users to locate
|
|
|
|
|
and navigate.
|
|
|
|
|
|
|
|
|
|
<div class="image-wrapper">
|
|
|
|
|
<img src="/images/navbar_2.png" alt="level 2">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
### Level 3 categories
|
|
|
|
|
|
|
|
|
|
Suitable for complicated utility websites. The left sidebar holds first level
|
|
|
|
|
navigation, and the middle column displays second level navigation or other utility
|
|
|
|
|
options.
|
|
|
|
|
|
|
|
|
|
<div class="image-wrapper">
|
|
|
|
|
<img src="/images/navbar_3.png" alt="level 3">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
## Top Navigation
|
|
|
|
|
|
|
|
|
|
Conforms to the normal browsing order from top to bottom, which makes things more
|
|
|
|
|
natural. The navigation amount and text length are limited to the width of the top.
|
|
|
|
|
|
|
|
|
|
Suitable for sites with few navigation and large chunks.
|
|
|
|
|
|
|
|
|
|
<div class="image-wrapper">
|
|
|
|
|
<img src="/images/navbar_0.png" alt="Top Navigation">
|
|
|
|
|
</div>
|
