Навигация, доступная в 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>

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

`<b-nav>`

Функциональный компонент

Смотреть источник

<b-nav> Свойства
<b-nav> Слоты

Свойства

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

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

Слоты

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

`<b-nav-item>`

Функциональный компонент

Смотреть источник

<b-nav-item> Свойства
<b-nav-item> Слоты

Свойства

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`active`	`Boolean`	`false`	При значении `true` переводит компонент в активное состояние с активным стилем.
`active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
`append`	`Boolean`	`false`	<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`exact`	`Boolean`	`false`	<router-link> свойство: Поведение сопоставления активного класса по умолчанию включает сопоставление. Установка этого свойства заставляет режим точно соответствовать маршруту
`exact-active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна с точным соответствием. Обычно Вам нужно установить это имя класса 'active'
`exact-path`	`Boolean`	`false`	<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`	`Boolean`	`false`	<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка `no-prefetch` отключит эту функцию для конкретной ссылки
`prefetch` v2.15.0+	`Boolean`	`null`	<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка для `prefetch` значения `true` или `false` перезапишет значение по умолчанию `router.prefetchLinks`
`rel`	`String`	`null`	<b-link> свойство: Устанавливает атрибут `rel` для отображаемой ссылки
`replace`	`Boolean`	`false`	<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`	Содержимое для размещения в элементе навигации

`<b-nav-text>`

Функциональный компонент

Смотреть источник

<b-nav-text> Слоты

Слоты

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

`<b-nav-form>`

Функциональный компонент

Смотреть источник

<b-nav-form> Свойства
<b-nav-form> Слоты
<b-nav-form> События

Свойства

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

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

Слоты

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

События

Событие	Аргументы	Описание
`submit`	`event` - Native 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 или при использовании подключаемого модуля группы компонентов.

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

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