<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 -->

有时，您希望将自己的类名添加到生成的 Dropdown 切换按钮中，默认情况下，这些按钮具有 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> 仅在菜单显示时才呈现菜单内容。

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

请参阅 <b-dropdown> 定位部分，了解这些属性的效果和用法。

请注意，切换按钮实际上以链接 <a> 标记形式呈现，带有 role="button" 以便于设置样式，并且通常将 href 设置为 #，除非通过 id prop 提供 ID。

点击切换链接时，切换将防止滚动到顶部行为（通过 JavaScript）。在某些情况下，当使用 SSR 时，如果用户在 Vue 有机会对组件进行水合之前点击切换按钮，页面将滚动到顶部。在这些情况下，只需通过 id prop 提供一个唯一的 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 prop，并设置 pills 或 tabs prop

选项卡样式

<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 prop。请注意，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 prop 没有样式效果。

与 Vue 路由配合使用

让你的卡片 <b-nav> 通过 <router-view> 或 <nuxt-child> 组件控制 vue 路由嵌套路由，以创建随路由 URL 变化的选项卡内容

// 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 路由不支持使用哈希 (#) 定义活动路由，这就是为什么你必须将“选项卡”内容定义为子路由。

上述内容的示例路由配置

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 路由命名路由和/或路由参数，而不是基于路径的路由。

更多详情请参见

无障碍

如果你使用 <b-nav> 提供导航栏，请务必为 <b-nav> 的最逻辑父容器添加 role="navigation"，或用 <nav> 元素包裹 <b-nav>。不要将角色添加到 <b-nav> 本身，因为这会阻止辅助技术将其宣布为实际列表。

在 <b-nav> 中使用 <b-nav-item-dropdown> 时，请务必为 <b-nav-item-dropdown> 分配一个唯一的 id prop 值，以便可以自动生成适当的 aria-* 属性。

选项卡界面无障碍

请注意，导航栏，即使在视觉上以选项卡样式呈现，也不应赋予 role="tablist"、role="tab" 或 role="tabpanel" 属性。这些属性仅适用于不会更改 URL 或 $route 的选项卡界面，如 WAI ARIA 创作实践中所述。请参阅 <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`	用导航项填充所有水平空间，但与“fill”不同，每个导航项的宽度都相同
`pills`	`布尔值`	`false`	以药丸按钮的外观呈现导航项
`small`	`布尔值`	`false`	使导航栏变小
`tabs`	`布尔值`	`false`	以选项卡的外观呈现导航项
`tag`	`字符串`	`'ul'`	指定要呈现的 HTML 标签，而不是默认标签
`vertical`	`布尔值`	`false`	垂直呈现导航栏

插槽

名称	说明
`default`	要放置在导航栏中的内容

`<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> 属性：允许仅使用 URL 的路径部分进行匹配，有效地忽略查询和哈希部分
`exact-path-active-class`	`字符串`		<router-link> 属性：配置链接使用完全路径匹配处于活动状态时应用的活动 CSS 类。通常，您需要将其设置为类名“active”
`href`	`字符串`		<b-link> 属性：表示标准 a 链接的目标 URL
`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>`。在希望使用基于 `<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 链接）特定属性的更多详细信息，请参阅路由支持参考部分。

插槽

名称	说明
`default`	要放置在导航项中的内容

`<b-nav-text>`

功能组件

查看源代码

<b-nav-text> 插槽

插槽

名称	说明
`default`	要放置在导航文本中的内容

`<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”，触发原生浏览器验证状态

插槽

名称	说明
`default`	要放置在导航表单中的内容

事件

事件	参数	说明
`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`	`数字`或`字符串`	`0`
`popper-opts`	`对象`	`{}`	要传递给 Popper.js 的其他配置
`right`	`布尔值`	`false`	将菜单的右边缘与按钮的右边缘对齐
`role`	`字符串`	`'menu'`	将 ARIA 属性 `role` 设置为特定值
`text`	`字符串`		要放置在切换元素（链接）中的文本
`toggle-class`	`数组` 或 `对象` 或 `字符串`		要添加到切换元素（链接）的 CSS 类（或类）

注意：支持 HTML 字符串 (*-html) 的属性在传递原始用户提供的值时容易受到跨站点脚本 (XSS) 攻击。你必须首先正确清理用户输入！

名称	作用域	说明
`button-content`	否	可用于实现带有图标和更多样式的自定义文本
`default`		下拉菜单内容的可选作用域默认插槽

事件	参数	说明
`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 路由配合使用

无障碍

选项卡界面无障碍

另请参阅

组件参考

`<b-nav>`

属性

插槽

`<b-nav-item>`

属性

插槽

`<b-nav-text>`

插槽

`<b-nav-form>`

属性

插槽

事件

导入单个组件

作为 Vue.js 插件导入

概述

链接外观

标签样式

药丸样式

小

填充和对齐

填充

对齐

对齐

垂直变化

下拉支持

可选作用域的默认插槽

延迟加载下拉菜单

下拉菜单位置

下拉菜单实现说明

导航文本内容

导航内嵌表单

选项卡本地内容支持

卡片集成

与 Vue 路由配合使用

无障碍

选项卡界面无障碍

另请参阅

组件参考

属性

插槽

属性

插槽

插槽

属性

插槽

事件

组件别名

属性

插槽

事件

导入单个组件

作为 Vue.js 插件导入