導覽

Bootstrap 中可用的導覽功能共用部分標記和樣式，從基礎 <b-nav> 類別到 active 和 disabled 狀態。變更修改屬性以切換每種樣式。

<div>
  <b-nav>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav.vue -->

概觀

基礎 <b-nav> 組件是使用弹性盒狀模型建置而成，可作為建構各式各樣的導覽組件的穩固基礎。它包含一些樣式覆寫（用於清單），一些連結內充以加大按壓區域，以及基本的停用樣式。基礎導覽功能中不包含任何作用中狀態。

<b-nav> 支援下列子組件

<b-nav-item> 用於可作用的連結（或路由器連結）
<b-nav-item-dropdown> 用於下拉選單
<b-nav-text> 用於純文字內容
<b-nav-form> 用於內嵌表單

連結外觀

支援兩種樣式變化：標籤和功能區按鍵，它們支援active狀態樣式。這些變化是互斥的 - 只能使用一種或另一種樣式。

標籤樣式

透過設定tabs屬性，讓導覽功能看起來像標籤。

<div>
  <b-nav tabs>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-tabs.vue -->

功能區按鍵樣式

透過設定pills屬性，使用功能區按鍵樣式。

<div>
  <b-nav pills>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-pills.vue -->

小型

透過設定small屬性，讓導覽功能變小。

<div>
  <b-nav small>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-small.vue -->

填滿且置中對齊

強制<b-nav>內容延伸至全部可用的寬度。

填滿

如要讓<b-nav-item>元件按比例填滿所有可用的空間，請設定fill屬性。請注意，所有水平空間都已佔用，但並非每個導覽功能項目都具有相同的寬度。

<div>
  <b-nav tabs fill>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-fill.vue -->

置中對齊

如要讓元素寬度相同，請改為設定justified屬性。所有水平空間都將由導覽連結佔用，但與上述fill不同，每個<b-nav-item>將具有相同的寬度。

<div>
  <b-nav tabs justified>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-justified.vue -->

對齊

如要對齊<b-nav-item>元件，請使用align屬性。可用的值為left、center和right。

<div>
  <b-nav tabs align="center">
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-alignment.vue -->

垂直變化

預設情況下，<b-nav>出現在水平線上。透過設定vertical屬性，將導覽功能堆疊。

<div>
  <b-nav vertical class="w-25">
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-vertical.vue -->

使用<b-nav-item-dropdown>將下拉項目放置在導覽功能中。

<div>
  <b-nav pills>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item-dropdown
      id="my-nav-dropdown"
      text="Dropdown"
      toggle-class="nav-link-custom"
      right
    >
      <b-dropdown-item>One</b-dropdown-item>
      <b-dropdown-item>Two</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Three</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-nav>
</div>

<!-- b-nav-item-dropdown.vue -->

有時您會希望將自訂類別名稱加入產生式下拉切換按鈕，它預設包含nav-link和dropdown-toggle類別。使用toggle-class屬性（如上例所示）加入它們，將會呈現類似下列 HTML

<li id="my-nav-dropdown" class="nav-item b-nav-dropdown dropdown">
  <a
    role="button"
    href="#my-nav-dropdown"
    id="my-nav-dropdown__BV_button_"
    aria-haspopup="true"
    aria-expanded="false"
    class="nav-link dropdown-toggle nav-link-custom"
  ></a>
  ...
</li>

請參閱<b-dropdown>，取得支援次元件的清單。

選擇性範圍預設區塊

下拉預設區塊選擇性地以下列範圍作用

屬性或方法	說明
`hide()`	可用来关闭下拉选單。接受一个可选的布林参数，如果为 `true` 会将焦点返回到切换按钮

默认情况下，<b-nav-item-dropdown> 即使在未显示选单时，也会在 DOM 中呈现选单内容。当在同一页面上呈现大量下拉式选单时，可能会因为整体内存使用量增加而影响效能。你可以通过将 lazy 属性设为 true，指示 <b-nav-item-dropdown> 仅在显示选单内容时呈现。

使用 <b-nav-item-dropdown> 的下列属性来控制其位置：right、dropup、dropright、dropleft、no-flip 和 offset。

请参考 <b-dropdown> 定位部分，以详细了解这些属性的效果及其使用方法。

请注意，切换按钮实际上渲染为链接 <a> 标签，并带有 role="button"，以用于样式定义，且通常将 href 设置为 #，除非通过 id 属性提供 ID。

点击切换链接时，切换按钮会阻止滚动至顶端的行为（通过 JavaScript）。在某些情况下，当使用 SSR，并且用户在 Vue 有机会激活组件之前点击切换按钮时，页面会滚动到顶端。在这些情况下，只需通过 id 属性提供一个唯一 ID，即可防止不需要的滚动到顶端的行为。

导航文字内容

使用 <b-nav-text> 子组件，将纯文本内容置入导航中

<div>
  <b-nav >
    <b-nav-item href="#1">Link 1</b-nav-item>
    <b-nav-item href="#2">Link 2</b-nav-item>
    <b-nav-text>Plain text</b-nav-text>
  </b-nav>
</div>

<!-- b-nav-text.vue -->

内嵌表单

使用 <b-nav-form> 子组件，将内嵌表单置入导航中

<div>
  <b-nav pills>
    <b-nav-item href="#1" active>Link 1</b-nav-item>
    <b-nav-item href="#2">Link 2</b-nav-item>
    <b-nav-form @submit.stop.prevent="alert('Form Submitted')">
      <b-form-input aria-label="Input" class="mr-1"></b-form-input>
      <b-button type="submit">Ok</b-button>
    </b-nav-form>
  </b-nav>
</div>

<!-- b-nav-form.vue -->

请参考 <b-form> 内嵌文件，以了解有关放置表单控件的更多详细信息。

分頁的本地内容支持

參閱 <b-tabs> 元件以建立具有當地內容的標籤面板（不適合導航）。

卡片整合

使用 <b-card> 標頭中的 <b-nav>，方法是在 <b-nav> 上啟用 card-header 屬性，並設定 pills 或 tabs 屬性

標籤樣式

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

<!-- nav-card-tabs.vue -->

藥丸樣式

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header pills>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

<!-- nav-card-pills.vue -->

一般樣式

僅在套用 tabs 或 pills 樣式時才需要 card-header 屬性。請注意，Bootstrap v4 SCSS 沒有 active 狀態一般樣式導覽項目特殊樣式。

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

<!-- nav-card-plain.vue -->

如果 <b-nav> 處於 vertical 模式，card-header 屬性將沒有樣式效果。

搭配 Vue Router 使用

讓您的卡片 <b-nav> 透過 <router-view> 或 <nuxt-child> 元件，控制 vue router 內嵌路由，以建立隨路由網址而變動的分頁內容

// On page with route `/some/route`
<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <!-- <b-nav-item>'s with child routes. Note the trailing slash on the first <b-nav-item> -->
        <b-nav-item to="/some/route/" exact exact-active-class="active">Active</b-nav-item>
        <b-nav-item to="/some/route/foo" exact exact-active-class="active">Foo</b-nav-item>
        <b-nav-item to="/some/route/bar" exact exact-active-class="active">Bar</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body>
      <!-- Child route gets rendered in <router-view> or <nuxt-child> -->
      <router-view></router-view>
      <!-- Or if using Nuxt.js
      <nuxt-child></nuxt-child>
      -->
    </b-card-body>
  </b-card>
</div>

注意：Vue Router 不支援定義具有雜湊 (#) 的 active 路由，這就是您必須將「分頁」內容定義為子路由的原因。

上述範例的路由設定範例

const routes = [
  {
    path: '/some/route',
    // We don't provide a name on this parent route, but rather
    // set the name on the default child route instead
    // name: 'some-route',
    component: SomeRouteComponent,
    // Child route "tabs"
    children: [
      // Note we provide the above parent route name on the default child tab
      // route to ensure this tab is rendered by default when using named routes
      { path: '', component: DefaultTabComponent, name: 'some-route' },
      { path: 'foo', component: FooTabComponent },
      { path: 'bar', component: BarTabComponent }
    ]
  }
]

也可以使用 Vue Router 命名路由和/或路由參數，而非基於路徑的路由。

如需詳情，請參閱

無障礙

如果使用 <b-nav> 提供導覽列，請務必將 role="navigation" 加入 <b-nav> 較具邏輯的上層父容器，或在 <b-nav> 周圍加上一個 <nav> 元素。請勿將角色加入 <b-nav> 本身，因為這會使其無法被輔助技術宣告為實際清單。

使用 <b-nav-item-dropdown> 在 <b-nav> 中時，請務必為 <b-nav-item-dropdown> 指派唯一的 id 屬性值，以便可以自動產生適當的 aria-* 屬性。

選項卡介面的可及性

請注意，導覽列就算視覺上設計成選項卡，不應賦予 role="tablist"、role="tab" 或 role="tabpanel" 屬性。這些屬性僅適用於不會變更 URL 或 $route 的選項卡介面，如 WAI ARIA Authoring Practices 中所述。請參閱 <b-tabs> 以了解符合 WAI ARIA 規範的動態選項卡介面。

選項卡介面應避免使用下拉式選單，因為這樣會造成可用性和可及性問題

從可用性的角度來看，當前顯示的選項卡觸發器元素並未立即顯示出來（因為它在封閉的下拉式選單中），這可能會造成混淆。
從可及性的角度來看，目前沒有明智的方法可將這種類型的結構對應到標準的 WAI ARIA 樣式，這表示對於輔助科技的使用者而言，並不容易理解。

另請參閱

<b-tabs> 透過下拉式選單建立可辨識區域內容的選項卡窗格。
<b-navbar> 包裹在簡潔標題中的品牌、導覽列和其他元素。
<b-dropdown> 可以放置在 <b-nav-item-dropdown> 內的子元件
路由器連結支援參考可取得 <b-nav-item> 中路由器特定屬性的相關資訊

元件參考

`<b-nav>`

功能元件

檢視原始程式碼

<b-nav> 屬性
<b-nav> 插槽

屬性

所有屬性的預設值皆為全域設定。

屬性	類型	預設	說明
`align`	`字串`		對齊導覽列中的導覽項目：'start'（或 'left'）、'center'、'end'（或 'right'）
`card-header` v2.0.0+	`布林值`	`false`	當導覽列置於卡片標頭內時，設定此屬性
`fill`	`布林值`	`false`	將所有水平空間與導覽項目成比例填滿。佔用所有水平空間，但並非每個導覽項目都具備相同的寬度
`justified`	`布林值`	`false`	將所有水平空間填滿導覽項目，但與「填滿」不同，每個導覽項目都具備相同的寬度
`pills`	`布林值`	`false`	使用按鈕外觀呈現導覽項目
`small`	`布林值`	`false`	縮小導覽列
`tabs`	`布林值`	`false`	使用標籤外觀呈現導覽項目
`tag`	`字串`	`'ul'`	指定要呈現的 HTML 標籤（而不是預設標籤）
`vertical`	`布林值`	`false`	垂直呈現導覽列

插槽

名稱	說明
`預設`	要置於導覽列中的內容

`<b-nav-item>`

功能元件

檢視原始程式碼

<b-nav-item> 屬性
<b-nav-item> 插槽

屬性

所有屬性的預設值皆為全域設定。

屬性 (按一下以上傳排序)	類型 (按一下以上傳排序)	預設	說明
`active`	`布林值`	`false`	設定為「true」時，可將元件置於具有作用中樣式的作用中狀態
`active-class`	`字串`		<router-link> 屬性：設定連結作用中時套用之作用中 CSS 類別。通常您會想將其設定為類別名稱「active」
`append`	`布林值`	`false`	<router-link> 屬性：設定 append 屬性 תמיד會將相對路徑附加至目前的途徑
`disabled`	`布林值`	`false`	設定為「true」時，可停用元件的功能，並將其置於已停用狀態
`exact`	`布林值`	`false`	<router-link> 屬性：預設作用中類別比對行為為包含式比對。設定此屬性可強制模式完全比對路徑
`exact-active-class`	`字串`		<router-link> 屬性：設定連結以確實比對作用中的 CSS 類別。通常您會想將其設定為類別名稱「active」
`exact-path`	`布林值`	`false`	<router-link> 屬性：允許只使用網址的路徑區段比對，實際上會忽略查詢字串和雜湊區段
`exact-path-active-class`	`字串`		<router-link> 屬性：設定連結以確實路徑比對作用中的 CSS 類別。通常您會想將其設定為類別名稱「active」
`href`	`字串`		<b-link> 屬性：表示標準 a 連結的目標網址
`link-attrs`	`物件`	`{}`	要置於嵌套連結元素上的其他屬性
`link-classes`	`陣列`或`物件`或`字串`		套用在巢狀連結元素上的 CSS 類別（或類別）
`no-prefetch`	`布林值`	`false`	<nuxt-link> 屬性：若要提升 Nuxt.js 應用程式的回應度，當連結準備在視窗中顯示時，Nuxt.js 會自動預擷取分拆代碼頁面。設定 `no-prefetch` 會停用特定連結的此功能
`prefetch` v2.15.0+	`布林值`	`null`	<nuxt-link> 屬性：若要提升 Nuxt.js 應用程式的回應度，當連結準備在視窗中顯示時，Nuxt.js 會自動預擷取分拆代碼頁面。設定 `prefetch` 為 `true` 或 `false` 會覆寫 `router.prefetchLinks` 的預設值
`rel`	`字串`	`null`	<b-link> 屬性：設定已呈現連結上的 `rel` 屬性
`replace`	`布林值`	`false`	<router-link> 屬性：設定 replace 屬性後，點擊時會呼叫 `router.replace()` 而非 `router.push()`，因此導覽不會留下歷史記錄
`router-component-name` v2.15.0+	`字串`		<b-link> 屬性：BootstrapVue 會自動在 `<router-link>` 和 `<nuxt-link>` 之間進行偵測。如果你想使用 based on `<router-link>` 的第三方連結元件，請將此屬性設定為元件名稱。例如，如果你使用 Gridsome，請將其設定為 'g-link'（請注意，僅有特定 `<router-link>` 的屬性會傳遞給元件）
`target`	`字串`	`'_self'`	<b-link> 屬性：設定已呈現連結上的 `target` 屬性
`to`	`物件`或`字串`		<router-link> 屬性：表示連結的目標路線。點擊時，此 to 屬性的值會在內部傳遞至 `router.push()`，因此值可以是字串或位置描述物件

<b-nav-item> 支援產生 <router-link> 或 <nuxt-link> 元件（如果使用 Nuxt.js）。有關路由連結（或 nuxt 連結）特定屬性的更多詳細資料，請參閱 Router 支援參考區塊。

區塊

名稱	說明
`預設`	要放入導覽項目的內容

`<b-nav-text>`

功能元件

檢視原始程式碼

<b-nav-text> 區塊

區塊

名稱	說明
`預設`	要放入導覽文字的內容

`<b-nav-form>`

功能元件

檢視原始程式碼

<b-nav-form> 屬性
<b-nav-form> 插槽
<b-nav-form> 事件

屬性

所有屬性的預設值皆為全域設定。

屬性	類型	預設	說明
`form-class`	`陣列`或`物件`或`字串`		新增到表單的 CSS 類別 (或類別)
`id`	`字串`		用於設定已呈現內容上的 `id` 屬性，並用作根據需要產生任何額外元素 ID 的基礎
`novalidate`	`布林值`	`false`	設定後，將停用表單中控制項上的瀏覽器原生 HTML5 驗證
`validated`	`布林值`	`false`	設定後，將在表單上新增 Bootstrap 類別 'was-validated'，觸發瀏覽器的原生驗證狀態

插槽

名稱	說明
`預設`	要放入導覽表單中的內容

事件

事件	參數	說明
`submit`	`event` - 原生的提交事件	當表單已提交時發出

檢視原始程式碼

<b-nav-item-dropdown> 元件別名
<b-nav-item-dropdown> 屬性
<b-nav-item-dropdown> 插槽
<b-nav-item-dropdown> 事件

<b-nav-item-dropdown> 也可透過以下別名使用

<b-nav-item-dd>
<b-nav-dropdown>
<b-nav-dd>

注意：只有在匯入全部 BootstrapVue 或使用元件群組外掛時，才能使用元件別名。

所有屬性的預設值皆為全域設定。

屬性 (按一下以上傳排序)	類型 (按一下以上傳排序)	預設	說明
`boundary` v2.4.0+	`HTMLElement` 或 `String`	`'scrollParent'`	功能表的邊界約束：'scrollParent'、'window'、'viewport' 或對 `HTMLElement` 的參照。功能表位於 `<b-navbar>` 中時無效
`disabled`	`布林值`	`false`	設定為「true」時，可停用元件的功能，並將其置於已停用狀態
`dropleft`	`布林值`	`false`	設定後，將功能表定位在按鈕的左側
`dropright`	`布林值`	`false`	設定後，將功能表定位在按鈕的右側
`dropup`	`布林值`	`false`	設定後，將功能表定位在按鈕的上方
`html` 謹慎使用	`字串`		要放置在切換元素（連結）中的 HTML 字串
`id`	`字串`		用於設定已呈現內容上的 `id` 屬性，並用作根據需要產生任何額外元素 ID 的基礎
`lazy`	`布林值`	`false`	設定時，只有在選單開啟時才會將選單內容載入至 DOM
`menu-class`	`陣列`或`物件`或`字串`		要加入至選單容器中的 CSS 類級 (或類級)
`no-caret`	`布林值`	`false`	隱藏切換元素 (連結) 的插入符號指示器
`no-flip`	`布林值`	`false`	防止選單自動翻轉位置
`offset`	`Number` 或 `String`	`0`
`popper-opts`	`物件`	`{}`	要傳遞給 Popper.js 的其他組態
`right`	`布林值`	`false`	將選單的右邊緣與按鈕的右邊緣對齊
`role`	`字串`	`'menu'`	將 ARIA 屬性 `role` 設定為特定值
`text`	`字串`		要放置在切換元素 (連結) 中的文字
`toggle-class`	`陣列`或`物件`或`字串`		要加入至切換元素 (連結) 中的 CSS 類級 (或類級)

小心：支援 HTML 字串的屬性 (*-html) 在傳遞使用者提供的原始值時，可能會受到跨網站腳本 (XSS) 攻擊的影響。您必須先適當地清除使用者輸入的資料！

名稱	縮限	說明
`button-content`	否	可供用自訂文字搭配圖示、並加入更多樣式
`預設`		選用縮限範圍的預設插槽，供下拉選單內容使用

事件	參數	說明
`hidden`		下拉選單隱藏時發出
`hide`	`bvEvent` - BvEvent 物件。呼叫 bvEvent.preventDefault() 以取消隱藏。	下拉選單即將隱藏前發出。可取消。
`show`	`bvEvent` - BvEvent 物件。呼叫 bvEvent.preventDefault() 以取消顯示。	下拉選單即將顯示前發出。可取消。
`shown`		下拉選單顯示時發出
`toggle`		切換按鈕按一下時發出

匯入個別元件

您可以透過以下命名匯出來匯入個別元件到您的專案

元件	命名匯出	匯入路徑
`<b-nav>`	`BNav`	`bootstrap-vue`
`<b-nav-item>`	`BNavItem`	`bootstrap-vue`
`<b-nav-text>`	`BNavText`	`bootstrap-vue`
`<b-nav-form>`	`BNavForm`	`bootstrap-vue`
`<b-nav-item-dropdown>`	`BNavItemDropdown`	`bootstrap-vue`

範例

import { BNav } from 'bootstrap-vue'
Vue.component('b-nav', BNav)

以 Vue.js 外掛方式匯入

此外掛包含以上列出的所有個別元件. 外掛還包含任何元件別名。

命名匯出	匯入路徑
`NavPlugin`	`bootstrap-vue`

此外掛也自動包含以下外掛

DropdownPlugin

範例

import { NavPlugin } from 'bootstrap-vue'
Vue.use(NavPlugin)

概觀

連結外觀

標籤樣式

功能區按鍵樣式

小型

填滿且置中對齊

填滿

置中對齊

對齊

垂直變化

下拉支援

選擇性範圍預設區塊

延迟加载下拉式选单

下拉选单位置

下拉选单实现说明

导航文字内容

内嵌表单

分頁的本地内容支持

卡片整合

搭配 Vue Router 使用

無障礙

選項卡介面的可及性

另請參閱

元件參考

屬性

插槽

屬性

區塊

區塊

屬性

插槽

事件

元件別名

屬性

插槽

事件

匯入個別元件

以 Vue.js 外掛方式匯入