導覽列

元件 <b-navbar> 是包裝定位標誌、導覽和其他元素到一個簡潔的標題中。它很容易擴充套件，並感謝 <b-collapse> 元件，它可以輕鬆整合響應行為。

範例

<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

<!-- b-navbar.vue -->

色彩配置

<b-navbar> 支援標準的 Bootstrap v4 可用的背景色彩選項。將 variant props 設定為下列值之一以變更背景色彩： primary、 success、 info、 warning、 danger、 dark 或 light。

透過設定 type props 為 light 來控制文字色彩，適用於搭配淺色背景，或 dark 適用於深色背景。

定位

透過設定下列兩個 props 之一來控制導覽列的定位

prop	類型	預設	說明
`fixed`	字串	`null`	設定為 `top` 以固定在視窗頂端，或設定為 `bottom` 以固定在視窗底部。
`sticky`	布林值	`false`	設定為 `true` 使導覽列當捲動時貼合在視窗頂端（或設定 `position: relative` 的父層容器）。

注意

固定定位使用 CSS position: fixed。你可能需要調整文件頂/底部內距或外距。
CSS position: sticky (用於 sticky) 並非每個瀏覽器都支援。對於不支援 position: sticky 的瀏覽器，它將原生回退至 position: relative。

支援的內容

導覽列內建支援少數子元件。在需要時從下列選項中挑選

<b-navbar-brand> 給您的公司、產品或專案名稱。
<b-navbar-toggle> 與 <b-collapse is-nav> 元件搭配使用。
<b-collapse is-nav> 用於依父級中斷點群組和隱藏導覽列內容。
<b-navbar-nav> 具有全高的輕量級導覽（包含對下拉選單的支援）。下列子元件在 <b-navbar-nav> 內部受到支援
- <b-nav-item> 用於連結（和路由連結）動作項目
- <b-nav-item-dropdown> 用於導覽列下拉選單
- <b-nav-text> 用於加入直向置中的文字字串。
- <b-nav-form> 給任何表單控制和動作。

如果提供了 href，<b-navbar-brand> 會產生一個連結，或是在提供了 to 的情況下會產生一個 <router-link>。若沒有提供任何一個，它會作為 <div> 標籤呈現。您可以透過將 tag prop 設定為您要呈現的元素來覆寫標籤類型

<div>
  <!-- As a link -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">BootstrapVue</b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-link.vue -->

<div>
  <!-- As a heading -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand tag="h1" class="mb-0">BootstrapVue</b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-heading.vue -->

將圖片加入到 <b-navbar-brand> 常常會需要自訂樣式或工具才能適當地設定大小。以下是用來做示範的一些範例

<div>
  <!-- Just an image -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" alt="Kitten">
    </b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-image.vue -->

<div>
  <!-- Image and text -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
      BootstrapVue
    </b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-image-and-text.vue -->

導覽列導覽連結建立在 <b-navbar-nav> 父元件上，而且需要使用 <b-collapse is-nav> 和 <b-nav-toggle> 切換器才能適當設定回應式樣式。導覽列中的導覽也會成長以佔據越多水平空間越好，以保持導覽列內容安全對齊。

<b-navbar-nav> 支援下列子元件

<b-nav-item> 用於連結（和路由連結）動作項目
<b-nav-text> 用於加入直向置中的文字字串。
<b-nav-item-dropdown> 給導覽列下拉選單
<b-nav-form> 用於將簡單表單加入到導覽列。

`<b-nav-item>`

<b-nav-item> 是主要連結（和 <router-link>）元件。提供 to prop 值會產生一個 <router-link>，同時提供 href prop 值會產生一個標準連結。

設定 <b-nav-item> active prop 會將該項目標示為目前的頁面，透過將 prop disabled 設定為 true 來停用 <b-nav-item>。

透過在 <b-nav-item> 上指定 @click 事件處理常式來處理按一下事件。

`<b-nav-text>`

導覽列可以透過 <b-nav-text> 協助包含一些文字。此元件會調整字串文字的直向對齊和水平間距。

<div>
  <b-navbar toggleable="sm" type="light" variant="light">
    <b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>

    <b-navbar-brand>BootstrapVue</b-navbar-brand>

    <b-collapse id="nav-text-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-text>Navbar text</b-nav-text>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

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

有關 <b-nav-item-dropdown> 用法請參閱 <b-dropdown> 文件。請注意，<b-navbar> 和 <b-navbar-nav> 不支援分割式下拉選單。

<div>
  <b-navbar type="dark" variant="dark">
    <b-navbar-nav>
      <b-nav-item href="#">Home</b-nav-item>

      <!-- Navbar dropdowns -->
      <b-nav-item-dropdown text="Lang" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown text="User" right>
        <b-dropdown-item href="#">Account</b-dropdown-item>
        <b-dropdown-item href="#">Settings</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-navbar>
</div>

<!-- b-navbar-dropdown.vue -->

`<b-nav-form>`

使用 <b-nav-form> 將內嵌表單控制項放入您的導航列

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-form-input class="mr-sm-2" placeholder="Search"></b-form-input>
      <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
    </b-nav-form>
  </b-navbar>
</div>

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

輸入群組也適用

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-input-group prepend="@">
        <b-form-input placeholder="Username"></b-form-input>
      </b-input-group>
    </b-nav-form>
  </b-navbar>
</div>

<!-- b-navbar-form-inputs.vue -->

導航列預設不是回應式的，但您可以輕鬆修改它們使其改變樣式。回應式行為取決於我們的 <b-collapse> 元件。

將 <b-navbar-nav> 元件包覆在 <b-collapse is-nav> 中（請記得設定 is-nav 道具！）以指定將根據特定中斷點折疊的內容。在 <b-collapse> 上指定文件唯一的 id 值。

使用 <b-navbar-toggle> 元件來控制折疊元件，並將 <b-navbar-toggle> 的 target 道具設定為 <b-collapse> 的 id。

在 <b-navbar> 上設定 toggleable 道具為您希望內容自動展開的目標中斷點。可能的 toggleable 值包括 sm、md、lg 和 xl。將 toggleable 設定為 true（或空字串）會將導航列設定為始終折疊，而將其設定為 false（預設值）會停用折疊（始終展開）。

<b-navbar-toggle> 元件預設為置左對齊，但如果它們置於 <b-navbar-brand> 等兄弟元素之後，它們會自動置右對齊。反向您的標記會讓切換器的位置反過來。

請參閱此頁面的第一個範例以供參考，並參閱 <b-collapse> 以了解折疊元件的詳細資訊。

除了用於控制折疊外，<b-navbar-toggle> 也可用於切換 <b-sidebar> 元件的可見性。只要透過 target 道具指定 <b-sidebar> 的 ID 即可。

在內部，<b-navbar-toggle> 使用 v-b-toggle 指令。

<b-navbar-toggle> 會呈現預設的 Bootstrap v4 漢堡（這是一個背景 SVG 影像）。您可以透過選擇性的作用域 default 插槽提供您自己的內容（例如圖示）。預設的插槽範圍包含 expanded 屬性，當折疊展開時會為 true，或當折疊收起時會為 false。

注意，expanded 範圍屬性僅在提供 target prop 作為 string，而不是 array 時才起作用。

<template>
  <b-navbar toggleable type="dark" variant="dark">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="navbar-toggle-collapse">
      <template #default="{ expanded }">
        <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
        <b-icon v-else icon="chevron-bar-down"></b-icon>
      </template>
    </b-navbar-toggle>

    <b-collapse id="navbar-toggle-collapse" is-nav>
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="#">Link 1</b-nav-item>
        <b-nav-item href="#">Link 2</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>
<!-- b-navbar-toggle-slot.vue -->

列印

列印時，導覽列預設為隱藏。透過設定 print prop，強制列印它們。

另請參閱

<b-collapse> 元件
<b-sidebar> 元件
v-b-toggle 指令
<b-nav> 文件，以取得其他元件及子元件別名的相關資訊

請參閱路由器支援參考資料頁面，以取得與路由器連結相關的特定屬性。

元件參考

檢視原始碼

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

所有屬性的預設值都為可全局設定。

屬性	類型	預設值	說明
`fixed`	`字串`		設定為 'top' 以固定在視窗頂端，或 'bottom' 以固定在視窗底部
`print`	`布林值`	`false`	列印時，導覽列預設為隱藏。設定此屬性時將進行列印
`sticky`	`布林值`	`false`	設定為 true，讓導覽列在捲動時固定在視窗頂端（或有設定 'position: relative' 的父容器頂端）
`tag`	`字串`	`'nav'`	指定要渲染的 HTML 標籤，取代預設標籤
`toggleable`	`Boolean` 或 `String`	`false`	設定為 'true'，讓導覽列永遠摺疊，或設定為特定中斷點，導覽列在該中斷點將會展開：'sm', 'md', 'lg' 或 'xl'
`類型`	`字串`	`'light'`	設定為 'light' 以配合亮色背景變異色，或設定為 'dark' 以配合暗色背景變異色，以控制文字顏色
`variant`	`字串`		套用 Bootstrap 主題顏色變異色之一至元件

名稱	說明
`預設`	放入導覽列的內容

功能性元件

檢視原始碼

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

所有屬性的預設值都為可全局設定。

屬性	類型	預設值	說明
`align`	`字串`		在導覽元件中對齊 nav 元件：'start'（或 'left'）、'center'、'end'（或 'right'）
`fill`	`布林值`	`false`	按比例以 nav 元件填滿所有水平空間。將會佔用所有水平空間，但並非每個 nav 元件都有相同的寬度
`justified`	`布林值`	`false`	以 nav 元件填滿所有水平空間，但與 'fill' 不同，每個 nav 元件將具有相同的寬度
`small`	`布林值`	`false`	讓 nav 較小
`tag`	`字串`	`'ul'`	指定要渲染的 HTML 標籤，取代預設標籤

名稱	說明
`預設`	放入導覽列 nav 的內容

功能性元件

檢視原始碼

<b-navbar-brand> 屬性
<b-navbar-brand> 插槽

所有屬性的預設值都為可全局設定。

屬性 (按一下以升序排序)	類型 (按一下以升序排序)	預設值	說明
`active`	`布林值`	`false`	設定為 `true` 時，會以 active 樣式設定元件為 active 狀態
`active-class`	`字串`		<router-link> 屬性：設定連結為 active 時套用的 active CSS 類別。通常您會想將它設定為類別名稱 'active'
`append`	`布林值`	`false`	<router-link> 屬性：設定 append 屬性會一直將相對路徑新增到目前路徑
`disabled`	`布林值`	`false`	設定為 `true` 時，會停用元件的功能並設定為停用狀態
`exact`	`布林值`	`false`	<router-link> 屬性：預設 active 類別比對行為為包含比對。設定此屬性會強制模式與路由完全相符
`exact-active-class`	`字串`		<router-link> 屬性：設定連結在完全比對的情況下為 active 時套用的 active CSS 類別。通常您會想將它設定為類別名稱 'active'
`exact-path`	`布林值`	`false`	<router-link> 屬性：允許僅使用 URL 的路徑區段進行比對，實際上會忽略查詢和 hash 區段
`exact-path-active-class`	`字串`		<router-link> 屬性：設定連結在完全比對路徑的情況下為 active 時套用的 active CSS 類別。通常您會想將它設定為類別名稱 'active'
`href`	`字串`		<b-link> 屬性：標示標準 a 連結的目標 URL
`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>`。在您想使用根據 `<router-link>` 的協力廠商連結元件時，請將此屬性設定為元件名稱。例如，若您使用 Gridsome，請將它設定為 'g-link'（請注意，只有 `<router-link>` 特定的屬性會傳遞給元件）
`tag`	`字串`	`'div'`	指定要渲染的 HTML 標籤，取代預設標籤
`target`	`字串`	`'_self'`	<b-link> 屬性：設定呈現的連結上的 `target` 屬性
`to`	`物件` 或 `字串`		<router-link> 屬性：標示連結的目標路由。按一下時，to 屬性的值會內部傳遞給 `router.push()`, 因此值可以是字串，也可以是位置敘述物件

<b-navbar-brand> 支援產生 <router-link> 或 <nuxt-link> 元件（如果使用 Nuxt.js）。若要取得路由連結（或 nuxt 連結）特定屬性的詳細資料，請參閱路由支援參考區段。

名稱	說明
`預設`	放置在導覽列品牌中的內容

檢視原始碼

<b-navbar-toggle> 組合別名
<b-navbar-toggle> 屬性
<b-navbar-toggle> 區段
<b-navbar-toggle> 事件

<b-navbar-toggle> 也可透過以下別名使用

<b-nav-toggle>

注意：組件別名僅在導入所有 BootstrapVue 或使用組件群組外掛時可用。

所有屬性的預設值都為可全局設定。

屬性	類型	預設值	說明
`disabled` v2.15.0+	`布林值`	`false`	當為 `true` 時會停用導覽列切換按鈕，並在按鈕上增加 `disabled` 類別
`標籤`	`字串`	`'切換導覽'`	放置在切換的 'aria-label' 屬性中的字串
`target` 必需	`陣列` 或 `字串`		應進行切換的收合/側邊欄組件的 ID（或 ID 陣列）

名稱	scoped	說明
`預設`		其他內容，用來取代預設的 Bootstrap 漢堡

事件	參數	說明
`click`	原生 click 事件物件	在 click 切換時發出

導入個別元件

您可以透過下述命名匯出，將個別組件導入至專案中

組件	命名匯出	匯入路徑
`<b-navbar>`	`BNavbar`	`bootstrap-vue`
`<b-navbar-nav>`	`BNavbarNav`	`bootstrap-vue`
`<b-navbar-brand>`	`BNavbarBrand`	`bootstrap-vue`
`<b-navbar-toggle>`	`BNavbarToggle`	`bootstrap-vue`

範例

import { BNavbar } from 'bootstrap-vue'
Vue.component('b-navbar', BNavbar)

以 Vue.js 外掛形式導入

此外掛包含上述所有列出的個別組件外掛也包含任何組件別名。

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

此外掛還自動包含下列外掛

NavPlugin
DropdownPlugin
CollapsePlugin

範例

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

色彩配置

定位

支援的內容

`<b-navbar-brand>`

`<b-navbar-nav>`

`<b-nav-item>`

`<b-nav-text>`

`<b-nav-form>`

`<b-navbar-toggle>` 和 `<b-collapse is-nav>`

自訂導航列切換器

列印

另請參閱

元件參考

`<b-navbar>`

屬性

插槽

`<b-navbar-nav>`

屬性

插槽

`<b-navbar-brand>`

屬性

插槽

`<b-navbar-toggle>`

組件別名

屬性

區段

事件

導入個別元件

以 Vue.js 外掛形式導入

色彩配置

定位

支援的內容

<b-navbar-brand>

<b-navbar-nav>

<b-nav-item>

<b-nav-text>

<b-nav-item-dropdown>

<b-nav-form>

<b-navbar-toggle> 和 <b-collapse is-nav>

自訂導航列切換器

列印

另請參閱

元件參考

屬性

插槽

屬性

插槽

屬性

插槽

組件別名

屬性

區段

事件

導入個別元件

以 Vue.js 外掛形式導入

`<b-navbar-brand>`

`<b-navbar-nav>`

`<b-nav-item>`

`<b-nav-text>`

`<b-nav-item-dropdown>`

`<b-nav-form>`

`<b-navbar-toggle>` 和 `<b-collapse is-nav>`