Navigation

用於做導引或功能選項列。使用類別為 .nav 並以此作為子元件前綴詞。啟用狀態可在 .nav_item 加上 .is:on;禁用狀態則加上 .is:off 或是加上屬性 [disabled]。如果選項項目是連結作用,可使用 <a>;功能選項則使用 <button>。每一個項目都是一個 Column .nav_col

以下為基本的導覽列。

<ul class="nav"> <li class="nav_col"> <a class="nav_item is:on"></a> </li> <li class="nav_col"> <a class="nav_item"></a> </li> <li class="nav_col"> <a class="nav_item is:off"></a> </li> </ul>

也可以使用 <button> 來作為功能選項,此時字級大小會略小。

<ul class="nav"> <li class="nav_col"> <button class="nav_item is:on"></button> </li> <li class="nav_col"> <button class="nav_item"></button> </li> <li class="nav_col"> <button class="nav_item is:off"></button> </li> </ul>

垂直排列

.nav 加上 .:vertical 則可以使得垂直排列。

<div class="nav :vertical"></div>