那些總是叫不出名字的 UI Components 【Navigation 篇】
前情提要 💡
上一篇講了跟 Inputs 有關的元件名稱，忘記的話可以回去複習一下那些總是叫不出名字的 UI Components 【Inputs 篇】。
接下來這篇要講的是跟 navigation 有關的元件。那 navigation 是什麼意思呢？在英文裡，navigation 是導航、航空、航海的意思，當名詞使用；動詞則是 navigate。
但是在現代的網頁技術中，navigate 和 navigation 可以是很多意思。
首先，我們連上網路、進到某個網站的動作或過程就可以稱為 navigation，包括使用超連結（hypertext）。而這個用法從 Timothy Berners-Lee 教授發明全球資訊網（the World Wide Web，也就是我們常常看到的 www）的時候就開始了。
除了使用網址到某個特定頁面的行為可以叫做 navigation 以外，點選 dropdown menu、drop-down menu 或 drop-down list 這些 UI 介面而到達某個網站的行為同樣也可以稱為 navigation。
這篇文章要介紹的是跟 navigation 有關的 UI 元件，包括 menu、breadcrumb、drawer、stepper、tap 和 link。這六個英文單字雖然很簡單，但是他們都有一點不一樣的地方，在溝通的時候使用這些詞彙絕對可以幫助設計師和工程師們看起來更專業，所以就讓我們開始吧！
Menu
最一開始我必須先講一下 Menu，但其實 Menu 聽起來很籠統，外行人稱各式各樣的選單或是所有的 navigation UI 元件可能都會用 Menu 這個字一言以蔽之。
雖然 Menu 聽起來像菜單一樣，有種可以攤在桌上任君挑選的感覺，但在 UI 元件中我們僅稱那些會暫時出現的選項叫做 Menu。
讓我們來看一下下圖這個是 dribbble 的首頁，上面那條「 Explore / For Designers / Hiring Designers? 」那一行就是 Menu。
當我點擊 Explore 時會跳出「 Shots / Top Designers / Blog / Weekly Warmup / Playoffs 」的那個選單。
Breadcrumb
Breadcrumb 很難用文字說明，但它應該算是大家都可以一目了然的元件了，也有人會直接用它的中文意思「麵包屑」稱呼它。Breadcrumb 可以用在中規中矩的組織層次，像是以下這種有組織層級的地方。
就用最近很紅的衛生福利部來當例子吧！「首頁 / 本部簡介 / 行政組織」那一行就是 Breadcrumb。
另外，像是檔案路徑也是一種 Breadcrumb。
Drawer
Drawer 也可以稱作 sidebar。我們可以透過點選 drawer 來連結到目標位置或是其他的功能，像是切換帳號之類的。它可以永久出現在畫面上，叫做 persistent drawer，像是網頁版的 Dcard；也可以暫時出現在畫面上，叫做 temporary drawer，當我們點選沒被 drawer 覆蓋到的地方時他會自動關閉。
（在這邊補充一下，沒被 drawer 覆蓋到的地方可以稱為 overlay。）
Responsive drawer
除了 persistent drawer 和 temporary drawer 外，在他們之間還有一種叫做 responsive drawer。
Responsive 是「響應的、感動的」的意思，而 responsive drawer 是會跟隨網頁的大小做適當的畫面安排，以固定範圍的比例出現在畫面上。當畫面太小時，他就會變成 temporary drawer，暫時地跑出來後又縮回去。
Stepper
Stepper 是透過數字的方式表示進度的 UI 元件，大部分的時候我們可以直接點選該進度，然後就可以直接跳到那個頁面。橫向的 Stepper 叫做 horizontal stepper，直向的叫做 vertical stepper。
Tab
同一個層次裡，將內容分組，可以使用點選的方式互相切換的元件就叫 Tab。
下面兩張圖的 React 網頁裡的「 Docs / Tutorial / Blog / Community 」就是一個 Tab 元件。
另外，dribbble 裡的作品分類也是。
Link
最後介紹一下最無話可說的 link，雖然沒有什麼好介紹的，但偏偏他還是 navigation 的一種。像是下面的連結可以連到我的 GitHub，這就叫 link，也不用附圖說明了吧 😅
👉 My GitHub Link 👈
後記 📷
這是 UI 系列文章的第二篇了，這篇文章的元件都用了很可愛的英文字，像是菜單、麵包屑和抽屜，雖然已經是第二篇了，但寫這篇文章的時候我依然在崩潰到底要如何找到這些看似很常見的元件XD
希望這些文章可以幫助到正在入門 UI 相關知識的大家，如果有寫錯的地方或更好的建議也歡迎提供 feedback （this.yingchencheng@gmail.com），謝謝大家 ❤️
