---
title: Navigation
lang: en-US
---

<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

Affix the navigation at the left edge, thus improves its visibility, making it
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>