ナブとタブ

Bootstrap に含まれるナビゲーションコンポーネントをどのように使用するかのドキュメントと例です。

Base nav

Bootstrap で利用可能なナビゲーションは、基本的な NavList コンポーネントからアクティブな状態と無効な状態まで、一般的なマークアップとスタイルを共有します。それぞれのスタイルを切り替えるために修飾子クラスを入れ替えます。

ベースの NavList コンポーネントは flexbox で構築されており、すべてのタイプのナビゲーションコンポーネントを構築するための強力な基盤を提供します。これには、いくつかのスタイルのオーバーライド (リストを扱うための)、より大きなヒットエリアのためのリンクのパディング、基本的な無効化されたスタイルが含まれています。

vue
<template>
 <NavList>
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>
vue
<template>
 <Nav>
  <NavLink active>
   Active
  </NavLink>
  <NavLink>Link</NavLink>
  <NavLink>Link</NavLink>
  <NavLink disabled>
   Disabled
  </NavLink>
 </Nav>
</template>

Available styles

NavList コンポーネントのスタイルを修飾子とユーティリティで変更します。必要に応じて組み合わせて使用することもできますし、独自のスタイルを構築することもできます。

Horizontal alignment

flexbox utilities を使用して、ナビゲーションの水平方向の配置を変更できます。 デフォルトでは、ナビゲーションは左揃えですが、簡単に中央または右揃えに変更できます。

justify-content="center" 属性で中央揃えにします。

vue
<template>
 <NavList justify-content="center">
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

justify-content="end" 属性で右揃えにします。

vue
<template>
 <NavList justify-content="end">
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

Vertical

flex-direction="column" 属性で flex item(フレックスアイテム) の方向を変更してナビゲーションを縦に積み上げることができます。一部のビューポートでは縦にしたいが、他のビューポートでは縦したくない場合は、flex-direction="sm-column" を使用してください。

vue
<template>
 <NavList flex-direction="column">
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

いつものように、NavItem コンポーネントがなくても縦方向のナビゲーションは可能です。

vue
<template>
 <NavList flex-direction="column">
  <NavLink active>
   Active
  </NavLink>
  <NavLink>Link</NavLink>
  <NavLink>Link</NavLink>
  <NavLink disabled>
   Disabled
  </NavLink>
 </NavList>
</template>

Tabs

nav="tabs" 属性を追加してタブ付きのインターフェイスを生成できます。 tab JavaScript plugin でタブ可能領域を作成します。

vue
<template>
 <NavList nav="tabs">
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

Pills

同じ HTML を使用しますが、代わりに nav="pills" 属性を使用します。

vue
<template>
 <NavList nav="pills">
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

同じ HTML を使用しますが、代わりに nav="underline" 属性を使用します。

vue
<template>
 <NavList nav="underline">
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

Fill and justify

NavList の内容が利用可能な幅いっぱいになるように強制します。NavItem コンポーネントで利用可能なすべてのスペースを比例して埋めるには、 fill 属性を使います。すべてのナビゲーションアイテムの幅が同じではないことに注意してください。

vue
<template>
 <NavList
  nav="pills"
  fill
 >
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Much longer nav link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

Nav コンポーネントベースのナビゲーションを使用する場合、NavLink コンポーネントのスタイリングに必要なのは NavLink コンポーネントだけなので、 NavItem コンポーネントを省略しても問題ありません。

vue
<template>
 <Nav
  nav="pills"
  fill
 >
  <NavLink active>
   Active
  </NavLink>
  <NavLink>Much longer nav link</NavLink>
  <NavLink>Link</NavLink>
  <NavLink disabled>
   Disabled
  </NavLink>
 </Nav>
</template>

アイテムを等しいサイズにしたい場合は justified 属性を使用します。 すべての水平方向のスペースはナビゲーションリンクで占められますが、上記の fill 属性とは異なり、すべてのナビゲーションアイテムは同じ幅になります。

vue
<template>
 <NavList
  nav="pills"
  justified
 >
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Much longer nav link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

Nav コンポーネントに fill 属性を適用した場合は

vue
<template>
 <Nav
  nav="pills"
  justified
 >
  <NavLink active>
   Active
  </NavLink>
  <NavLink>Much longer nav link</NavLink>
  <NavLink>Link</NavLink>
  <NavLink disabled>
   Disabled
  </NavLink>
 </Nav>
</template>

Working with flex utilities

レスポンシブナブのバリエーションが必要な場合は flexbox utilities を使用します。 これらの utilities(ユーティリティ) は冗長ではありますが、レスポンシブブレークポイント間でより大きなカスタマイズが可能です。 下の例では、ナビは最も低いブレークポイントの場合は縦になり、幅をひろげることで、水平レイアウトになります。

vue
<template>
 <Nav
  nav="pills"
  flex-direction="column sm-row"
 >
  <NavLink
   flex-fill="sm"
   text-alignment="sm-center"
   active
  >
   Active
  </NavLink>
  <NavLink
   flex-fill="sm"
   text-alignment="sm-center"
  >
   Much longer nav link
  </NavLink>
  <NavLink
   flex-fill="sm"
   text-alignment="sm-center"
  >
   Link
  </NavLink>
  <NavLink
   flex-fill="sm"
   text-alignment="sm-center"
   disabled
  >
   Disabled
  </NavLink>
 </Nav>
</template>

Regarding accessibility

ナビゲーションバーを提供するためにナビゲーションを使っている場合、NavList コンポーネントの親コンテナに role="navigation" を追加するか、Nav コンポーネントをナビゲーション全体にラップしてください。role を NavList コンポーネント自体に追加しないでください。

Using dropdowns

dropdown menu(ドロップダウンメニュー)に HTML を少し追加して、 dropdowns JavaScript plugin でドロップダウンメニューを追加します。

Tabs with dropdowns

vue
<template>
 <NavList nav="tabs">
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItemDropdown>
   <NavItemDropdownToggle>Dropdown button</NavItemDropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem>Another action</DropdownItem>
    <DropdownItemDivider />
    <DropdownItem>Something else here</DropdownItem>
   </DropdownMenu>
  </NavItemDropdown>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

Pills with dropdowns

vue
<template>
 <NavList nav="pills">
  <NavItem>
   <NavLink active>
    Active
   </NavLink>
  </NavItem>
  <NavItemDropdown>
   <NavItemDropdownToggle>Dropdown button</NavItemDropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem>Another action</DropdownItem>
    <DropdownItemDivider />
    <DropdownItem>Something else here</DropdownItem>
   </DropdownMenu>
  </NavItemDropdown>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>

JavaScript behavior

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue
<template>
 <NavList
  nav="tabs"
  margin="b-3"
  tablist
 >
  <NavItem>
   <NavLink
    active
    toggle="nav"
    tab="#home"
   >
    Home
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    toggle="nav"
    tab="#profile"
   >
    Profile
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    toggle="nav"
    tab="#contact"
   >
    Contact
   </NavLink>
  </NavItem>
 </NavList>
 <TabContent>
  <TabPane
   id="home"
   active
  >
   <p>
    <strong>
     This is some placeholder content the Home tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>

  <TabPane id="profile">
   <p>
    <strong>
     This is some placeholder content the Profile tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
  <TabPane id="contact">
   <p>
    <strong>
     This is some placeholder content the Contact tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
 </TabContent>
</template>

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue
<template>
 <NavList
  nav="tabs"
  margin="b-3"
  tablist
 >
  <NavLink
   active
   toggle="tab"
   tab="#home"
  >
   Home
  </NavLink>
  <NavLink
   toggle="tab"
   tab="#profile"
  >
   Profile
  </NavLink>
  <NavLink
   toggle="tab"
   tab="#contact"
  >
   Contact
  </NavLink>
 </NavList>
 <TabContent>
  <TabPane
   id="home"
   active
  >
   <p>
    <strong>
     This is some placeholder content the Home tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>

  <TabPane id="profile">
   <p>
    <strong>
     This is some placeholder content the Profile tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
  <TabPane id="contact">
   <p>
    <strong>
     This is some placeholder content the Contact tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
 </TabContent>
</template>

タブのプラグインは pills でも動作します。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue
<template>
 <NavList
  nav="pills"
  margin="b-3"
  tablist
 >
  <NavItem role="presentation">
   <NavLink
    active
    toggle="nav"
    tab="#pills-home"
   >
    Home
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    toggle="nav"
    tab="#pills-profile"
   >
    Profile
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    toggle="nav"
    tab="#pills-contact"
   >
    Contact
   </NavLink>
  </NavItem>
 </NavList>
 <TabContent>
  <TabPane
   id="pills-home"
   active
  >
   <p>
    <strong>
     This is some placeholder content the Home tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>

  <TabPane id="pills-profile">
   <p>
    <strong>
     This is some placeholder content the Profile tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
  <TabPane id="pills-contact">
   <p>
    <strong>
     This is some placeholder content the Contact tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
 </TabContent>
</template>

縦の pills でも同様です。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue
<template>
 <b-div
  flex
  align-items="start"
 >
  <NavList
   nav="pills"
   margin="e-3"
   tablist
  >
   <NavLink
    active
    tab="#v-pills-home"
   >
    Home
   </NavLink>
   <NavLink tab="#v-pills-profile">
    Profile
   </NavLink>
   <NavLink tab="#v-pills-contact">
    Messages
   </NavLink>
   <NavLink tab="#v-pills-settings">
    Settings
   </NavLink>
  </NavList>
 </b-div>
 <TabContent>
  <TabPane
   id="v-pills-home"
   active
  >
   <p>
    <strong>
     This is some placeholder content the Home tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
  <TabPane id="v-pills-profile">
   <p>
    <strong>
     This is some placeholder content the Profile tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
  <TabPane id="v-pills-contact">
   <p>
    <strong>
     This is some placeholder content the Contact tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
  <TabPane id="v-pills-settings">
   <p>
    <strong>
     This is some placeholder content the Settings tab's associated
     content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
 </TabContent>
</template>

Using data attributes

要素に tab 属性または pill 属性を指定するだけで、JavaScript を書かなくてもタブやピルのナビゲーションを有効にすることができます。これらのデータ属性は nav="tabs" 属性や nav="pills" 属性を持った NavList コンポーネントで使用します。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue
<template>
 <NavList nav="tabs">
  <NavItem>
   <NavLink
    active
    tab="#home"
    link="dark"
   >
    Home
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    tab="#profile"
    link="dark"
   >
    profile
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    tab="#messages"
    link="dark"
   >
    Link
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    tab="#settings"
    link="dark"
   >
    Settings
   </NavLink>
  </NavItem>
 </NavList>
 <!-- Nav tabs -->
 <TabContent>
  <TabPane
   id="home"
   active
  >
   <b-p>
    <strong>
     This is some placeholder content the Home tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </b-p>
  </TabPane>

  <TabPane id="profile">
   <b-p>
    <strong>
     This is some placeholder content the Profile tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </b-p>
  </TabPane>
  <TabPane id="messages">
   <b-p>
    <strong>
     This is some placeholder content the Messages tab's associated
     content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </b-p>
  </TabPane>
  <TabPane id="settings">
   <b-p>
    <strong>
     This is some placeholder content the Settings tab's associated
     content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </b-p>
  </TabPane>
 </TabContent>
</template>

Fade effect

タブをフェードインさせるには、TabPane コンポーネントに fade 属性を追加します。最初のタブペインには、最初のコンテンツを表示するために show 属性を追加する必要があります。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue
<template>
 <NavList
  nav="tabs"
  margin="b-3"
  tablist
 >
  <NavItem>
   <NavLink
    active
    toggle="nav"
    tab="#home"
   >
    Home
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    toggle="nav"
    tab="#profile"
   >
    Profile
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink
    toggle="nav"
    tab="#contact"
   >
    Contact
   </NavLink>
  </NavItem>
 </NavList>
 <TabContent>
  <TabPane
   id="home"
   fade
   active
  >
   <p>
    <strong>
     This is some placeholder content the Home tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>

  <TabPane
   id="profile"
   fade
  >
   <p>
    <strong>
     This is some placeholder content the Profile tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
  <TabPane
   id="contact"
   fade
  >
   <p>
    <strong>
     This is some placeholder content the Contact tab's associated content.
    </strong>
    Clicking another tab will toggle the visibility of this one for the
    next. The tab JavaScript swaps classes to control the content visibility
    and styling. You can use it with tabs, pills, and any other
    <code>.nav</code>
    -powered navigation.
   </p>
  </TabPane>
 </TabContent>
</template>

Auto activate

NavLink

vue
<template>
 <NavList nav="pills">
  <NavItem>
   <NavLink to="/lang-en/components/navs-tabs">
    Lang-en
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink to="/lang-ja/components/navs-tabs">
    Lang-ja
   </NavLink>
  </NavItem>
  <NavItem>
   <NavLink>Link</NavLink>
  </NavItem>
  <NavItem>
   <NavLink disabled>
    Disabled
   </NavLink>
  </NavItem>
 </NavList>
</template>