建立導覽標記元件

簡要介紹如何打造回應式且便利的導覽標記元件，讓使用者瀏覽您的網站。

Adam Argyle

在這篇文章中，我想分享有關導覽標記元件的建構方式。 立即試用。

示範

如果您喜歡看影片，請參考這篇文章的 YouTube 版本：

總覽

導覽標記元件會顯示 也就是使用者在網站階層中的哪個位置名稱是由 Hansel 和 Gretel，負責人 他們在一些黑暗林中後方的導覽標記找到了回家的路 就是要追溯到那些之前

這篇文章中的導覽標記並非標準 導覽標記 這兩種瀏覽方式相似這類遊戲會提供額外的功能， 將頁面直接加到導覽列中 <select>，以提供多層級存取權

背景使用者體驗

在上方的元件示範影片中，預留位置類別是 電玩遊戲透過導覽以下路徑即可建立這條小道：home » rpg » indie » on sale，如下所示。

這個導覽標記元件應能讓使用者前往 資訊階層；輕鬆快速地選擇多個網頁 準確度。

資訊架構

根據收藏和項目，我覺得會相當實用。

集合

集合是一種可供選擇的選項。前往以下網站的首頁： 本文介紹的導覽標記原型，集合包括每秒影格數、角色扮演遊戲、亂鬥 地下城檢索器、體育和謎題。

項目

電玩遊戲是一種物品，如果遊戲是某個道具，也可以是該系列作品 代表另一個集合例如角色扮演遊戲是一個項目 集合。如有某個項目，使用者就會進入該集合頁面。例如： 則所在的角色扮演遊戲頁面列出角色扮演遊戲的清單 其他子類別包括 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 使用元素。

定義一次即可，次數不限，而且能盡量減少對網頁效能的影響 以及彈性樣式請注意，SVG 元素已新增 aria-hidden="true"。 如果使用者只聽到內容，隱藏圖示，系統就不會顯示這些圖示 可以防止他們加入不必要的雜訊

這是傳統導覽標記與元件中其他導覽標記的差異。 通常這只是 <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 屬性會簡化這些間距的間距。

樣式

由於該顏色會使用系統顏色，因此大部分的樣式最能填補和堆疊！

版面配置方向和流程

開發人員工具顯示導覽標記導覽與 Flexbox 重疊對齊 而不是每個特徵的分數

主要導覽元素 nav.breadcrumbs 設定限定範圍的自訂屬性 然後會對兒童進行垂直對齊 版面配置。這可確保宣傳活動、分隔線和圖示對齊。

.breadcrumbs {
  --nav-gap: 2ch;

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
}

與 Flexbox 疊加層垂直對齊的導覽標記。

每個 .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 中難以水平調整的貼齊點 包括捲動和貼齊效果組合

媒體查詢

針對較小的可視區域，有一個細微的調整是隱藏「首頁」標籤，離開 只有圖示：

@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 推文連結，我們就會為您新增 前往下方的社群重混專區！

社群重混作品