ナブとタブ

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

項目

Base nav

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

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

Active
Link
Link
Disabled

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" 属性で中央揃えにします。

Active
Link
Link
Disabled

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" 属性で右揃えにします。

Active
Link
Link
Disabled

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" を使用してください。

Active
Link
Link
Disabled

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 コンポーネントがなくても縦方向のナビゲーションは可能です。

Active

Link

Disabled

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" 属性を使用します。

Active
Link
Link
Disabled

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 コンポーネント自体に追加しないでください。

ナビゲーションバーは、nav="tabs" 属性で視覚的にタブとしてスタイリングされていますが、role="tablist" 、role="tab" 、 role="tabpanel" 属性を与えないでください。これらは WAI ARIA Authoring Practices で説明されているように、動的なタブ付きインターフェースにのみ適切です。 JavaScript behavior を参照してください。JavaScript はアクティブなタブに aria-selected="true" 属性を追加することで選択された状態を処理するため、動的なタブ付きインターフェースでは aria-current 属性は必要ありません。

Using dropdowns

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

Tabs with dropdowns

vue

Pills with dropdowns

vue

<template>
  <NavList nav="pills">
    <NavItem>
      <NavLink active>
        Active
      </NavLink>
    </NavItem>
    <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown button</NavItemDropdownToggle>
      <DropdownMenu>
        <DropdownItem href="#">
          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>

Home

Profile

Contact

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 でも動作します。

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

vue

<template>
  <NavList nav="tabs">
    <NavItem>
      <NavLink
        active
        tab="#home"
      >
        Home
      </NavLink>
    </NavItem>
    <NavItem>
      <NavLink tab="#profile">
        profile
      </NavLink>
    </NavItem>
    <NavItem>
      <NavLink tab="#messages">
        Link
      </NavLink>
    </NavItem>
    <NavItem>
      <NavLink tab="#settings">
        Settings
      </NavLink>
    </NavItem>
  </NavList>
  <!-- Nav tabs -->
  <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="messages">
      <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.
      </p>
    </TabPane>
    <TabPane id="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>

Fade effect

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

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>