簡要介紹如何打造回應式且便利的導覽標記元件，讓使用者瀏覽您的網站。
在這篇文章中，我想分享有關導覽標記元件的建構方式。 立即試用。
如果你偏好觀看影片，請參閱這篇文章的 YouTube 版本：
總覽
導覽標記元件會顯示 也就是使用者在網站階層中的哪個位置名稱是由 Hansel 和 Gretel，負責人 他們在一些黑暗林中後方的導覽標記找到了回家的路 就是要追溯到那些之前
本文中的麵包屑並非標準麵包屑，而是類似麵包屑的功能。透過 <select> 將同層頁面直接放入導覽中，提供額外功能，讓使用者可以多層存取。
背景使用者體驗
在上述元件示範影片中，預留位置類別是電玩遊戲類型。如要建立這條軌跡，請前往以下路徑：home »
rpg » indie » on sale，如以下所示。
這個導覽標記元件應能讓使用者前往 資訊階層；輕鬆快速地選擇多個網頁 準確度。
資訊架構
根據收藏和項目，我覺得會相當實用。
集合
集合是一種可供選擇的選項。前往以下網站的首頁： 本文介紹的導覽標記原型，集合包括每秒影格數、角色扮演遊戲、亂鬥 地下城檢索器、體育和謎題。
項目
電玩遊戲是一種物品，如果遊戲是某個道具，也可以是該系列作品 代表另一個集合例如角色扮演遊戲是一個項目 集合。如有某個項目，使用者就會進入該集合頁面。舉例來說，這些類別會顯示在 RPG 頁面上，該頁面會顯示 RPG 遊戲清單，包括額外的 AAA、獨立和自出版子類別。
以電腦科學術語來說，這個麵包屑元件代表多維陣列：
const rawBreadcrumbData = {
"FPS": {...},
"RPG": {
"AAA": {...},
"indie": {
"new": {...},
"on sale": {...},
"under 5": {...},
},
"self published": {...},
},
"brawler": {...},
"dungeon crawler": {...},
"sports": {...},
"puzzle": {...},
}
您的應用程式或網站將有自訂資訊架構 (IA)，可建立不同的多維陣列，但我希望收藏集到達網頁和階層檢視的概念也能納入您的麵包屑。
版面配置
標記
優質元件會以適當的 HTML 開始。在下一節中，我將介紹 標記選項以及它們對整體元件的影響
深色和淺色配置
<meta name="color-scheme" content="dark light">
上述程式碼片段中的 color-scheme 中繼標記會通知瀏覽器，這個網頁需要淺色和深色瀏覽器樣式。範例中所示的麵包屑不含任何這些色彩配置的 CSS，因此麵包屑會使用瀏覽器提供的預設顏色。
導覽元素
<nav class="breadcrumbs" role="navigation"></nav>
您可以選擇使用
<nav> 元素
這種隱含的 ARIA 角色
。
在測試期間，我發現 role 屬性會變更螢幕閱讀器與元素互動的方式，實際上會以導覽方式顯示，因此我選擇新增這個屬性。
圖示
如果網頁上有重複的圖示，SVG <use> 元素表示您可以定義 path 一次，並將其用於所有圖示例項。這樣可以避免重複輸入相同的路徑資訊，
和路徑不一致的可能性
如要使用這項技巧，請在網頁中新增隱藏的 SVG 元素，然後納入圖示
在具有專屬 ID 的 <symbol> 元素中：
<svg style="display: none;">
<symbol id="icon-home">
<title>A home icon</title>
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</symbol>
<symbol id="icon-dropdown-arrow">
<title>A down arrow</title>
<path d="M19 9l-7 7-7-7"/>
</symbol>
</svg>
瀏覽器會讀取 SVG HTML，將圖示資訊放入記憶體，並繼續處理頁面其餘部分，以便在其他地方使用圖示：
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<use href="#icon-home" />
</svg>
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<use href="#icon-dropdown-arrow" />
</svg>
定義一次即可，次數不限，而且能盡量減少對網頁效能的影響
以及彈性樣式請注意，SVG 元素已新增 aria-hidden="true"。
對於只聽內容的瀏覽者而言，這些圖示並無用處，因此如果隱藏這些圖示，他們就不會加入不必要的噪音。
分割連結 .crumb
這就是傳統麵包屑和此元件中的麵包屑有何不同之處。通常這只是 <a> 連結，但我已新增週遊使用者體驗，並搭配
可以選擇。.crumb 類別負責設定連結的版面配置，
圖示，.crumbicon 則負責堆疊圖示並選取
元素。我將其命名為「分割連結」
類似於分割按鈕
但用於瀏覽頁面
<span class="crumb">
<a href="#sub-collection-b">Category B</a>
<span class="crumbicon">
<svg>...</svg>
<select class="disguised-select" title="Navigate to another category">
<option>Category A</option>
<option selected>Category B</option>
<option>Category C</option>
</select>
</span>
</span>
連結和一些選項並無特別之處，但可為簡單的麵包屑新增更多功能。對於螢幕來說，在 <select> 元素中新增 title 會很有幫助
讀者使用者，可以向他們提供按鈕動作的相關資訊。但
也讓所有人獲得相同的協助
iPad。一個屬性可為許多使用者提供按鈕內容。
分隔符號裝飾
<span class="crumb-separator" aria-hidden="true">→</span>
分隔符是選用項目，只要加入一個分隔符也能達到相同效果 (請參閱上方影片中的第三個範例)。接著我會給每個 aria-hidden="true"，因為它們是裝飾品，而非
才支援朗讀功能
接下來介紹的 gap 屬性會簡化這些間距的間距。
樣式
由於該顏色會使用系統顏色，因此大部分的樣式最能填補和堆疊！
版面配置方向和流程
主要導覽元素 nav.breadcrumbs 會為子項設定範圍限定的自訂屬性，並建立水平垂直對齊的版面配置。這可確保麵包屑、分隔符和圖示對齊。
.breadcrumbs {
--nav-gap: 2ch;
display: flex;
align-items: center;
gap: var(--nav-gap);
padding: calc(var(--nav-gap) / 2);
}
每個 .crumb 也會建立水平垂直對齊的版面配置，其中提供一些
缺口，但特別指定其連結子項並指定樣式
white-space: nowrap。這對於多字詞導覽標記相當重要
也希望他們採用多行文字本文後續部分將新增樣式，以處理這個 white-space 屬性造成的水平溢位問題。
.crumb {
display: inline-flex;
align-items: center;
gap: calc(var(--nav-gap) / 4);
& > a {
white-space: nowrap;
&[aria-current="page"] {
font-weight: bold;
}
}
}
新增 aria-current="page" 可讓目前網頁連結從其他連結中脫穎而出。不只讓螢幕閱讀器使用者清楚知道
我們已為元素完成視覺設計，讓視障使用者也能輕鬆瀏覽
也能獲得類似的使用者體驗
.crumbicon 元件會使用格線，將 SVG 圖示堆疊在「幾乎看不見」的 <select> 元素上。
.crumbicon {
--crumbicon-size: 3ch;
display: grid;
grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
place-items: center;
& > * {
grid-area: stack;
}
}
<select> 元素位於 DOM 中，因此位於堆疊頂端
以及互動式、互動性和互動性新增 opacity: .01 樣式，讓元素仍可使用，結果是選取方塊，可完美配合圖示形狀。這個方法很適合用來自訂 <select> 元素的外觀
維持內建功能
.disguised-select {
inline-size: 100%;
block-size: 100%;
opacity: .01;
font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}
溢位
麵包屑應能代表非常長的路徑。我喜歡 而且在適當的情況下水平脫離螢幕 我覺得 導覽標記元件的品質良好。
.breadcrumbs {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: calc(var(--nav-gap) / 2);
& > .crumb:last-of-type {
scroll-snap-align: end;
}
@supports (-webkit-hyphens:none) { & {
scroll-snap-type: none;
}}
}
溢位樣式會設定以下使用者體驗：
- 水平捲動，並包含過度捲動容器。
- 水平捲動邊框間距。
- 在最後一個鼓棒上，有一個扣針。也就是說，載入網頁時 碎片載入了對齊並顯示。
- 從 Safari 中移除貼齊點，因為該點會與水平捲動和貼齊效果組合產生衝突。
媒體查詢
針對較小的檢視區，您可以隱藏「Home」標籤，只保留圖示：
@media (width <= 480px) {
.breadcrumbs .home-label {
display: none;
}
}
無障礙設定
動作
這個元件中不會太過冗長，但是包裝
我們會進行 prefers-reduced-motion 檢查，藉此防止不必要的動作。
@media (prefers-reduced-motion: no-preference) {
.crumbicon {
transition: box-shadow .2s ease;
}
}
其他樣式不需要變更，懸停和焦點效果都極佳
沒有 transition 也代表有意義的結果，但如果動作沒問題，我們就會加入
轉換至互動模式
JavaScript
首先，無論您在網站或應用程式中使用的路由器類型為何，當使用者變更麵包屑時，就必須更新網址，並向使用者顯示適當的網頁。其次，為讓使用者體驗正常化，請確保使用者瀏覽 <select> 選項時，不會發生非預期的導覽。
由 JavaScript 處理的重要使用者體驗措施：選擇
已變更，並熱切 <select> 變更事件啟動預防。
由於使用 <select>，需要使用 Eeger 事件預防功能
元素。在 Windows Edge 和其他瀏覽器中，當使用者使用鍵盤瀏覽選項時，系統會觸發選取 changed 事件。這就是為什麼
呼叫該選項，因為使用者只選取了選項 (例如懸停動作)
尚未透過 enter 或 click 確認相關選項。由於在使用者準備好之前，開啟選項方塊並瀏覽項目就會觸發事件並變更頁面，因此急切事件會導致無法使用此元件類別變更功能。
發生更好的<select>變更活動
const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])
// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
let ignoreChange = false
nav.addEventListener('change', e => {
if (ignoreChange) return
// it's actually changed!
})
nav.addEventListener('keydown', ({ key }) => {
if (preventedKeys.has(key))
ignoreChange = true
else if (allowedKeys.has(key))
ignoreChange = false
})
})
這項策略的做法是在每個 <select> 元素上監控鍵盤按下事件，並判斷按下的按鍵是導覽確認 (Tab 或 Enter) 還是空間導覽 (ArrowUp 或 ArrowDown)。有了這項判斷，元件就能在 <select> 元素的事件觸發時決定是否等待或前往。
結論
既然你知道我如何操作，你會怎麼做呢？ 🙂
讓我們來體驗多元的方法，瞭解透過網路建立內容的所有方式。 建立示範、將 Twitter 推文連結，我們就會為您新增 前往下方的社群重混專區！
社群重混作品
- Tux Solbakk 當做網頁元件：示範和程式碼