Navbar

コンポーネント <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 プロパティを次のいずれかの値に設定します。: primary、success、info、warning、danger、dark、または light。

テキストの色を制御するには、明るい背景色のバリエーションを使用する場合は type プロパティを light に設定し、暗い背景色のバリエーションを使用する場合は dark に設定します。

配置

次の2つのプロパティのいずれかを設定して、navbarの配置を制御します

プロパティ	タイプ	デフォルト	説明
`fixed`	文字列	`null`	ビューポートの上部に固定する場合は `top` に、ビューポートの`下`部に固定する場合は `bottom` に設定します。
`sticky`	ブール値	`false`	スクロール時にnavbarをビューポートの上部（または `position: relative` が設定されている親コンテナ）に固定する場合は、`true` に設定します。

注記

固定位置は、CSS position: fixed を使用します。ドキュメントの上/下パディングまたはマージンを調整する必要がある場合があります。
CSS position: sticky（sticky に使用）は、すべてのブラウザで完全にサポートされているわけではありません。position: sticky をサポートしていないブラウザの場合、ネイティブに position: relative にフォールバックします。

サポートされるコンテンツ

navbarには、いくつかのサブコンポーネントの組み込みサポートが付属しています。必要に応じて、以下から選択してください

会社、製品、またはプロジェクト名の場合は、<b-navbar-brand>。
<b-collapse is-nav> コンポーネントで使用する場合は、<b-navbar-toggle>。
親ブレークポイントでnavbarのコンテンツをグループ化および非表示にする場合は、<b-collapse is-nav>。
フルハイトで軽量なナビゲーション（ドロップダウンのサポートを含む）には、<b-navbar-nav>。<b-navbar-nav> 内では、次のサブコンポーネントがサポートされています。
- リンク（およびrouter-link）アクションアイテムの場合は、<b-nav-item>。
- ナビゲーションドロップダウンメニューの場合は、<b-nav-item-dropdown>。
- 垂直方向に中央揃えされたテキストの文字列を追加する場合は、<b-nav-text>。
- フォームコントロールとアクションの場合は、<b-nav-form>。

<b-navbar-brand> は、href が指定されている場合はリンクを生成し、to が指定されている場合は <router-link> を生成します。どちらも指定されていない場合は、<div> タグとしてレンダリングされます。レンダリングする要素に tag プロパティを設定することで、タグタイプをオーバーライドできます。

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

navbarナビゲーションリンクは、<b-navbar-nav> 親コンポーネントに基づいて構築されており、適切なレスポンシブスタイリングには <b-collapse is-nav> および <b-nav-toggle> トグラーの使用が必要です。navbar内のナビゲーションは、navbarのコンテンツを安全に整列させるために、可能な限り水平方向に拡大します。

<b-navbar-nav> は、次の子コンポーネントをサポートしています

リンク（およびrouter-link）アクションアイテムの場合は、<b-nav-item>。
垂直方向に中央揃えされたテキストの文字列を追加する場合は、<b-nav-text>。
navbarドロップダウンメニューの場合は、<b-nav-item-dropdown>。
navbarにシンプルなフォームを追加する場合は、<b-nav-form>。

`<b-nav-item>`

<b-nav-item> は、プライマリリンク（および <router-link>）コンポーネントです。to プロパティ値を提供すると、<router-link> が生成され、href プロパティ値を提供すると、標準リンクが生成されます。

<b-nav-item> の active プロパティを設定すると、項目がアクティブなページとして強調表示されます。<b-nav-item> を無効にするには、プロパティ disabled を true に設定します。

<b-nav-item> の @click イベントのハンドラーを指定することで、クリックイベントを処理します。

`<b-nav-text>`

navbarには、<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>`

navbarにインラインフォームコントロールを配置するには、<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 -->

navbarはデフォルトではレスポンシブではありませんが、簡単に変更してレスポンシブにすることができます。レスポンシブな動作は、<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 （または空の文字列）に設定すると、navbarは常に折りたたまれ、false（デフォルト）に設定すると、折りたたみが無効になります（常に展開されます）。

<b-navbar-toggle> コンポーネントはデフォルトで左揃えですが、<b-navbar-brand> のような兄弟要素に従う場合、自動的に右端に揃えられます。マークアップを逆にすると、トグラーの配置が逆になります。

参考として、このページの最初の例を参照してください。また、collapse コンポーネントの詳細については、<b-collapse> を参照してください。

<b-navbar-toggle> は、collapse を制御するために使用されるだけでなく、<b-sidebar> コンポーネントの表示/非表示を切り替えるためにも使用できます。target プロパティで <b-sidebar> の ID を指定するだけです。

内部的には、<b-navbar-toggle> は v-b-toggle ディレクティブを使用します。

<b-navbar-toggle> は、デフォルトの Bootstrap v4 の *ハンバーガー*（背景 SVG 画像）をレンダリングします。必要に応じて、スコープ付きの default スロットを介して、独自のコンテンツ（アイコンなど）を提供できます。default スロットのスコープには expanded プロパティが含まれており、collapse が展開されている場合は true、collapse が折りたたまれている場合は false になります。

expanded スコーププロパティは、target プロパティを 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 プロパティを設定すると、印刷を強制できます。

コンポーネントリファレンス

ソースを表示

<b-navbar> プロパティ
<b-navbar> スロット

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ	型	デフォルト	説明
`fixed`	`文字列`		ビューポートの上部に固定するには 'top'、ビューポートの下部に固定するには 'bottom' に設定します。
`print`	`ブール値`	`false`	ナビバーは、印刷時にはデフォルトで非表示になります。このプロパティが設定されていると、印刷されます。
`sticky`	`ブール値`	`false`	スクロール時にナビバーをビューポートの上部（または 'position: relative' が設定された親コンテナ）に固定するには true に設定します。
`tag`	`文字列`	`'nav'`	デフォルトのタグの代わりにレンダリングする HTML タグを指定します。
`toggleable`	`Boolean` または `String`	`false`	常に折りたたまれたナビバーにするには 'true' に設定するか、ナビバーが展開される特定のブレークポイント 'sm'、'md'、'lg' または 'xl' を設定します。
`タイプ`	`文字列`	`'light'`	背景色のバリエーションでテキストの色を制御するには、明るい背景色バリアントを使用する場合は 'light'、暗い背景色バリアントを使用する場合は 'dark' に設定します。
`variant`	`文字列`		コンポーネントに Bootstrap テーマカラーバリアントの 1 つを適用します。

名前	説明
`デフォルト`	ナビバーに配置するコンテンツ

関数型コンポーネント

ソースを表示

<b-navbar-nav> プロパティ
<b-navbar-nav> スロット

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ	型	デフォルト	説明
`align`	`文字列`		ナビのナビアイテムを揃えます: 'start' (または 'left')、'center'、'end' (または 'right')
`fill`	`ブール値`	`false`	すべての水平スペースをナビアイテムで比例して埋めます。すべての水平スペースが占有されますが、すべてのナビアイテムが同じ幅を持つわけではありません。
`justified`	`ブール値`	`false`	すべての水平スペースをナビアイテムで埋めますが、'fill' とは異なり、すべてのナビアイテムが同じ幅になります。
`small`	`ブール値`	`false`	ナビを小さくします。
`tag`	`文字列`	`'ul'`	デフォルトのタグの代わりにレンダリングする HTML タグを指定します。

名前	説明
`デフォルト`	ナビバーナビに配置するコンテンツ

関数型コンポーネント

ソースを表示

<b-navbar-brand> プロパティ
<b-navbar-brand> スロット

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ (クリックして昇順でソート)	型 (クリックして昇順でソート)	デフォルト	説明
`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 を示します。
`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.push()` の代わりに `router.replace()` が呼び出されるため、ナビゲーションでは履歴レコードは残りません。
`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`	`Object` または `String`		<router-link> プロパティ: リンクのターゲットルートを示します。クリックすると、to プロパティの値が内部的に `router.push()` に渡されるため、値は文字列または Location 記述子オブジェクトのいずれかになります。

<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` が追加されます。
`label`	`文字列`	`'ナビゲーションの切り替え'`	トグルの 'aria-label' 属性に配置する文字列
`target` 必須	`Array` または `String`		切り替える必要がある collapse/sidebar コンポーネントの ID（または ID の配列）

名前	スコープ付き	説明
`デフォルト`		デフォルトの Bootstrap ハンバーガーを置き換える代替コンテンツ

イベント	引数	説明
`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>`