Навигация

Навигация, доступная в Bootstrap, использует общую разметку и стили, от базового класса <b-nav> до состояний active и disabled. Меняйте свойства модификатора, чтобы переключаться между каждым стилем.

<div>
  <b-nav>
    <b-nav-item active>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item>Другая ссылка</b-nav-item>
    <b-nav-item disabled>Отключенная</b-nav-item>
  </b-nav>
</div>

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

Обзор

Базовый компонент <b-nav> создан с помощью flexbox и обеспечивает прочную основу для создания всех типов компонентов навигации. Он включает в себя некоторые переопределения стилей (для работы со списками), некоторые отступы ссылок для больших областей попадания и базовые отключенные стили. В базовую навигацию не включены никакие активные состояния.

<b-nav> поддерживает следующие дочерние компоненты:

  • <b-nav-item> для действенных ссылок (или ссылок-маршрутизаторов)
  • <b-nav-item-dropdown> для раскрывающихся списков
  • <b-nav-text> для обычного текстового содержимого
  • <b-nav-form> для встроенных форм

Внешний вид ссылки

Поддерживаются два варианта стиля: tabs и pills, которые поддерживают стили active состояния. Эти варианты взаимоисключающие — используйте только тот или иной стиль.

Стиль табов

Сделайте навигацию похожей на вкладки, установив свойство tabs.

<div>
  <b-nav tabs>
    <b-nav-item active>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item>Другая ссылка</b-nav-item>
    <b-nav-item disabled>Отключенная</b-nav-item>
  </b-nav>
</div>

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

Стиль таблетки

Используйте стиль таблеток, установив свойство pills.

<div>
  <b-nav pills>
    <b-nav-item active>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item>Другая ссылка</b-nav-item>
    <b-nav-item disabled>Отключенная</b-nav-item>
  </b-nav>
</div>

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

Маленький

Сделайте навигацию меньше, установив свойство small.

<div>
  <b-nav small>
    <b-nav-item active>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item>Другая ссылка</b-nav-item>
    <b-nav-item disabled>Отключенная</b-nav-item>
  </b-nav>
</div>

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

Fill и justify

Принудительно расширяйте содержимое <b-nav> на всю доступную ширину.

Fill

Чтобы пропорционально заполнить все доступное пространство вашими компонентами <b-nav-item>, установите свойство fill. Обратите внимание, что все горизонтальное пространство занято, но не все элементы навигации имеют одинаковую ширину.

<div>
  <b-nav tabs fill>
    <b-nav-item active>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item>Ссылка с длинным именем</b-nav-item>
    <b-nav-item disabled>Отключенная</b-nav-item>
  </b-nav>
</div>

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

Justified

Для элементов одинаковой ширины вместо этого установите свойство justified. Все горизонтальное пространство будет занято навигационными ссылками, но в отличие от fill выше, все <b-nav-item> будут иметь одинаковую ширину.

<div>
  <b-nav tabs justified>
    <b-nav-item active>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item>Ссылка с длинным именем</b-nav-item>
    <b-nav-item 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>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item>Ссылка с длинным именем</b-nav-item>
    <b-nav-item disabled>Отключенная</b-nav-item>
  </b-nav>
</div>

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

Vertical variation

По умолчанию <b-nav> отображается на горизонтальной линии. Сложите свою навигацию, установив свойство vertical.

<div>
  <b-nav vertical class="w-25">
    <b-nav-item active>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item>Другая ссылка</b-nav-item>
    <b-nav-item disabled>Отключенная</b-nav-item>
  </b-nav>
</div>

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

Поддержка раскрывающегося списка

Используйте <b-nav-item-dropdown>, чтобы разместить выпадающие элементы в вашей навигации.

<div>
  <b-nav pills>
    <b-nav-item active>Активная</b-nav-item>
    <b-nav-item>Ссылка</b-nav-item>
    <b-nav-item-dropdown
      id="my-nav-dropdown"
      text="Раскрывающийся список"
      toggle-class="nav-link-custom"
      right
    >
      <b-dropdown-item>Один</b-dropdown-item>
      <b-dropdown-item>Два</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Три</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, даже если меню не отображается. Когда на одной странице отображается большое количество раскрывающихся списков, производительность может снизиться из-за большего общего использования памяти. Вы можете указать <b-nav-item-dropdown> отображать содержимое меню только тогда, когда оно отображается, установив для свойства lazy значение true.

Размещение в раскрывающемся списке

Используйте свойства раскрывающегося списка right, dropup, dropright, dropleft, no-flip и offset, чтобы управлять позиционированием <b-nav-item-dropdown>.

Обратитесь к разделу позиционирования <b-dropdown> для получения подробной информации об эффектах и использовании этих свойств.

Примечание о реализации раскрывающегося списка

Обратите внимание, что кнопка-переключатель на самом деле отображается как тег ссылки <a> с role="button" для целей стилизации, и обычно имеет href, установленный в #, если идентификатор не указан через свойство id.

Переключатель предотвратит поведение прокрутки вверх (через JavaScript) при нажатии на ссылку переключения. В некоторых случаях, когда используется SSR, и пользователь нажимает кнопку-переключатель до того, как Vue сможет гидратировать компонент, страница будет прокручиваться вверх. В этих случаях простое предоставление уникального идентификатора с помощью свойство id предотвратит нежелательное поведение прокрутки вверх.

Текстовое содержимое навигации

Используйте дочерний компонент <b-nav-text>, чтобы поместить обычный текст в навигацию:

<div>
  <b-nav >
    <b-nav-item href="#1">Ссылка 1</b-nav-item>
    <b-nav-item href="#2">Ссылка 2</b-nav-item>
    <b-nav-text>Простой текст</b-nav-text>
  </b-nav>
</div>

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

Встроенные формы навигации

Используйте дочерний компонент <b-nav-form>, чтобы поместить инлайн форму в навигацию:

<div>
  <b-nav pills>
    <b-nav-item href="#1" active>Ссылка 1</b-nav-item>
    <b-nav-item href="#2">Ссылка 2</b-nav-item>
    <b-nav-form @submit.stop.prevent="alert('Форма отправлена')">
      <b-form-input aria-label="Ввод" class="mr-1"></b-form-input>
      <b-button type="submit">Хорошо</b-button>
    </b-nav-form>
  </b-nav>
</div>

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

Дополнительные сведения о размещении элементов управления формы смотрите в документации инлайн <b-form>.

Поддержка местного контента с вкладками

Смотрите компонент <b-tabs> для создания вкладок с локальным содержимым (не подходит для навигации).

Интеграция карточек

Используйте <b-nav> в заголовке <b-card>, включив свойство card-header в <b-nav> и установив либо свойство 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>Активная</b-nav-item>
        <b-nav-item>Неактивная</b-nav-item>
        <b-nav-item disabled>Отключенная</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        Со вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
      </b-card-text>

      <b-button variant="primary">Иди куда-нибудь</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>Активная</b-nav-item>
        <b-nav-item>Неактивная</b-nav-item>
        <b-nav-item disabled>Отключенная</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        Со вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
      </b-card-text>

      <b-button variant="primary">Иди куда-нибудь</b-button>
    </b-card-body>
  </b-card>
</div>

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

Обычный стиль:

Свойство card-header нужно только тогда, когда вы применяете стиль tabs или pills. Обратите внимание, что Bootstrap v4 SCSS не имеет специального стиля для active элементов навигации в обычном стиле.

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav>
        <b-nav-item active>Активная</b-nav-item>
        <b-nav-item>Неактивная</b-nav-item>
        <b-nav-item disabled>Отключенная</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        Со вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
      </b-card-text>

      <b-button variant="primary">Иди куда-нибудь</b-button>
    </b-card-body>
  </b-card>
</div>

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

Свойство card-header не имеет эффекта стиля, если <b-nav> находится в vertical режиме.

Использование с маршрутизатором Vue

Пусть ваша карточка <b-nav> управляет вложенными маршрутами vue router через компоненты <router-view> или <nuxt-child>, чтобы создавать содержимое вкладок, которое изменяется с URL-адресом маршрута:

// На странице с маршрутом `/some/route`
<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <!-- <b-nav-item> с дочерними маршрутами. Обратите внимание на косую черту в конце первого элемента <b-nav-item> -->
        <b-nav-item to="/some/route/" exact exact-active-class="active">Активная</b-nav-item>
        <b-nav-item to="/some/route/foo" exact exact-active-class="active">Фуу</b-nav-item>
        <b-nav-item to="/some/route/bar" exact exact-active-class="active">Бар</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body>
      <!-- Дочерний маршрут отображается в <router-view> или <nuxt-child> -->
      <router-view></router-view>
      <!-- Или при использовании Nuxt.js
      <nuxt-child></nuxt-child>
      -->
    </b-card-body>
  </b-card>
</div>

Примечание. Vue Router не поддерживает определение активных маршрутов с помощью хэшей (#), поэтому вы должны определить содержимое «вкладки» как дочерние маршруты.

Пример конфигурации маршрутизатора выше:

const routes = [
  {
    path: '/some/route',
    // Мы не указываем имя для этого родительского маршрута,
    // а вместо имени устанавливаем имя для дочернего маршрута
    // по умолчанию: 'some-route',
    component: SomeRouteComponent,
    // "tabs" дочернего маршрута
    children: [
      // Обратите внимание, что указанное выше имя родительского маршрута
      // указано на маршруте дочерней вкладки по умолчанию, чтобы эта вкладка
      // отображалась по умолчанию при использовании именованных маршрутов
      { path: '', component: DefaultTabComponent, name: 'some-route' },
      { path: 'foo', component: FooTabComponent },
      { path: 'bar', component: BarTabComponent }
    ]
  }
]

Можно также использовать Vue Router именованные маршруты и/или параметры маршрута вместо маршрутов на основе пути.

Подробнее смотрите:

Доступность

Если вы используете <b-nav> для предоставления панели навигации, обязательно добавьте role="navigation" в наиболее логичный родительский контейнер <b-nav> или оберните <nav> элемент вокруг <b-nav>. Не добавляйте роль в сам <b-nav>, так как это помешает вспомогательным технологиям объявить ее как реальный список.

При использовании <b-nav-item-dropdown> в <b-nav> обязательно присвойте уникальное значение свойства id <b-nav-item-dropdown>, чтобы соответствующие атрибуты 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>.
  • Справочник по поддержке Router Link для получения информации о конкретных свойств <b-nav-item>

Справочник по компонентам

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
align
StringВыровняйте элементы навигации в навигации: 'start' (или 'left'), 'center', 'end' (или 'right')
card-header
v2.0.0+
BooleanfalseУстановите это свойство, когда навигация находится внутри заголовка карточки
fill
BooleanfalseПропорционально заполняет все горизонтальное пространство элементами навигации. Все горизонтальное пространство занято, но не каждый элемент навигации имеет одинаковую ширину
justified
BooleanfalseЗаполняет все горизонтальное пространство элементами навигации, но, в отличие от 'fill', все элементы навигации имеют одинаковую ширину
pills
BooleanfalseОтображает элементы навигации в виде кнопок-таблеток
small
BooleanfalseДелает навигацию меньше
tabs
BooleanfalseОтображает элементы навигации в виде вкладок
tag
String'ul'Указывает тег HTML для отображения вместо тега по умолчанию
vertical
BooleanfalseОтображает навигацию вертикально

Слоты

Наименование
Описание
default Контент для размещения в навигации

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
active
BooleanfalseПри значении `true` переводит компонент в активное состояние с активным стилем.
active-class
String<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
append
Booleanfalse<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
exact
Booleanfalse<router-link> свойство: Поведение сопоставления активного класса по умолчанию включает сопоставление. Установка этого свойства заставляет режим точно соответствовать маршруту
exact-active-class
String<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна с точным соответствием. Обычно Вам нужно установить это имя класса 'active'
exact-path
Booleanfalse<router-link> prop: Allows matching only using the path section of the url, effectively ignoring the query and the hash sections
exact-path-active-class
String<router-link> prop: Configure the active CSS class applied when the link is active with exact path match. Typically you will want to set this to class name 'active'
href
String<b-link> свойство: Обозначает целевой URL-адрес ссылки для стандартных ссылок
link-attrs
Object{}Дополнительные атрибуты для размещения во вложенном элементе ссылки
link-classes
Array или Object или StringКласс (или классы) CSS для размещения во вложенном элементе ссылки
no-prefetch
Booleanfalse<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка `no-prefetch` отключит эту функцию для конкретной ссылки
prefetch
v2.15.0+
Booleannull<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка для `prefetch` значения `true` или `false` перезапишет значение по умолчанию `router.prefetchLinks`
rel
Stringnull<b-link> свойство: Устанавливает атрибут `rel` для отображаемой ссылки
replace
Booleanfalse<router-link> свойство: Установка свойства `replace` будет вызывать `router.replace()` вместо `router.push()` при нажатии, поэтому навигация не будет оставлять запись в истории
router-component-name
v2.15.0+
String<b-link> свойство: BootstrapVue автоматически определяет между `<router-link>` и `<nuxt-link>`. В случаях, когда Вы хотите использовать сторонний компонент ссылки на основе `<router-link>`, установите это свойство на имя компонента, например установите для него значение 'g-link', если Вы используете Gridsome (обратите внимание, что компоненту передаются только определенные свойства `<router-link>`)
target
String'_self'<b-link> свойство: Устанавливает атрибут `target` для отображаемой ссылки
to
Object или String<router-link> свойство: Обозначает целевой маршрут ссылки. При нажатии значение свойства будет передано в `router.push()` внутренне, поэтому значение может быть либо строкой, либо объектом дескриптора местоположения

<b-nav-item> поддерживает генерацию <router-link> или <nuxt-link> компонент (при использовании Nuxt.js). Дополнительные сведения о свойствах, связанных с ссылками на маршрутизаторы (или Nuxt Link), смотрите в разделе справки по поддержке роутов.

Слоты

Наименование
Описание
default Содержимое для размещения в элементе навигации

Слоты

Наименование
Описание
default Содержимое для размещения в навигационном тексте

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
form-class
Array или Object или StringКласс CSS (или классы) для добавления в форму
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
novalidate
BooleanfalseЕсли установлено, отключает встроенную в браузер проверку HTML5 для элементов управления в форме
validated
BooleanfalseЕсли установлено, добавляет класс Bootstrap 'was-validated' в форму, вызывая собственные состояния проверки браузера

Слоты

Наименование
Описание
default Контент для размещения в форме навигации

События

Событие
Аргументы
Описание
submit
  1. event - Native submit event
Генерируется при отправке формы

<b-nav-item-dropdown>

Псевдонимы компонентов

<b-nav-item-dropdown> также может использоваться через следующие псевдонимы:

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

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
boundary
v2.4.0+
HTMLElement или String'scrollParent'Граничное ограничение меню: 'scrollParent', 'window', 'viewport' или ссылка на HTMLElement. Не действует, если раскрывающийся список находится внутри `<b-navbar>`
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
dropleft
BooleanfalseКогда установлено, позиционирует меню слева от кнопки
dropright
BooleanfalseКогда установлено, позиционирует меню справа от кнопки
dropup
BooleanfalseКогда установлено, размещает меню в верхней части кнопки
html
Использовать с осторожностью
StringСтрока HTML для размещения в элементе переключения (ссылка)
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
lazy
BooleanfalseЕсли установлено, содержимое меню будет монтироваться в DOM только тогда, когда меню открыто
menu-class
Array или Object или StringCSS-класс (или классы) для добавления в контейнер меню
no-caret
BooleanfalseСкрыть индикатор вставки на переключателе (ссылка)
no-flip
BooleanfalseПредотвратить автоматическое перелистывание меню
offset
Number или String0
popper-opts
Object{}Дополнительная конфигурация для передачи в Popper.js
right
BooleanfalseВыровняйте правый край меню по правому краю кнопки
role
String'menu'Устанавливает определенное значение для атрибута ARIA `role`
text
StringТекст для размещения в элементе переключения (ссылка)
toggle-class
Array или Object или StringКласс CSS (или классы) для добавления к элементу переключения (ссылка)

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

Наименование
Область
Описание
button-content НетМожет использоваться для реализации пользовательского текста с помощью иконок и других стилей
default Необязательный слот по умолчанию для содержимого раскрывающегося меню

События

Событие
Аргументы
Описание
hidden Генерируется, когда раскрывающийся список скрыт
hide
  1. bvEvent - Объект BvEvent. Вызовите bvEvent.preventDefault(), чтобы отменить скрытие
Генерируется непосредственно перед тем, как раскрывающийся список скрыт. Отменяемый
show
  1. bvEvent - Объект BvEvent. Вызовите bvEvent.preventDefault(), чтобы отменить показ
Генерируется непосредственно перед отображением раскрывающегося списка. Отменяемый
shown Генерируется при отображении выпадающего списка
toggle Генерируется при нажатии кнопки переключения

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент
Именованный экспорт
Путь импорта
<b-nav>BNavbootstrap-vue
<b-nav-item>BNavItembootstrap-vue
<b-nav-text>BNavTextbootstrap-vue
<b-nav-form>BNavFormbootstrap-vue
<b-nav-item-dropdown>BNavItemDropdownbootstrap-vue

Пример:

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

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
NavPluginbootstrap-vue

Этот плагин также автоматически включает следующие плагины:

  • DropdownPlugin

Пример:

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