ナビゲーションバー

ナビゲーションバーでは、レスポンシブなヘッダーなどのドキュメントと例を示します。

How it works

レスポンシブに折りたたむために Navbar コンポーネントを expand="{sm|md|lg|xl|xxl}" 属性をつける必要があり、color scheme 属性も必要です

  • ナビゲーションバーとコンテンツはデフォルトでは流動的です。color scheme を変更することで、横幅をさまざまな方法で制限することができます。
  • ナビゲーションバー内の間隔と配置を制御するには、spacing と flex を利用します。
  • デフォルトではレスポンシブになっていますが、簡単に変更することができます。レスポンシブな動作は Collapse JavaScript プラグインに依存します。
  • 現在のページ、アイテムには active 属性を用いて、現在の状態を示します。

Supported content

ナビゲーションバーには、いくつかのサブコンポーネントのサポートが組み込まれています。 必要に応じて、以下から選択してください。

  • <NavbarBrand> 会社、製品、またはプロジェクト名の NavbarBrand コンポーネント 。
  • <Navbar> フルハイトで軽量なナビゲーション（ドロップダウンのサポートを含む）
  • <NavbarToggler> collapse プラグインや他の navigation toggling で使用します。
  • フォームコントロールおよびアクション用のフレックスおよびスペーシングユーティリティ。
  • <NavbarText> 垂直方向に中央揃えのテキスト文字列を追加するための <NavbarText>。

以下は、 lg ブレークポイントで自動的に折りたたむ、ライトをテーマにしたレスポンシブなナビゲーションバーに含まれるすべてのサブコンポーネントの例です。

Navbar
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink to="/lang-en/components/navbar/">
       Link
      </NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-success"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

Brand

<NavbarBrand>はほとんどの要素に適用できますが、一部の要素ではユーティリティクラスやカスタムスタイルが必要な場合があるので、アンカーが最適です。

Text

<NavbarBrand> 属性の要素内にテキストを追加します。

Navbar
Navbar
vue
<template>
 <!-- As a link -->
 <Navbar
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand to="/">
    Navbar
   </NavbarBrand>
  </Container>
 </Navbar>
 <!-- As a heading -->
 <Navbar
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand
    margin="b-0"
    headings="1"
   >
    Navbar
   </NavbarBrand>
  </Container>
 </Navbar>
</template>

Image

<NavbarBrand> 属性の要素内に b-img コンポーネントを配置することもできます。

Image and text

また、画像とテキストを同時に追加する追加ユーティリティを利用することもできる。 b-imgコンポーネントにdisplay="inline-block" 属性とvertical-align="text-top" attrubuteが追加されていることに注目してください。

Navbar
vue
<template>
 <Navbar
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand to="/">
    <b-img
     src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Bootstrap_logo.svg"
     width="30"
     height="24"
     vertical-align="text-top"
     display="inline-block"
    />
    Navbar
   </NavbarBrand>
  </Container>
 </Navbar>
</template>

Nav

ナビゲーションバーのナビゲーションリンクは、独自の修飾子クラスを使用したナビゲーションオプションに基づいて構築されており、適切なレスポンシブスタイルを設定するには toggler classes を使用する必要があります。

ナビゲーションバーでのナビゲーションも、できるだけ多くの水平方向のスペースを占めるように拡大します、ナビゲーションバーのコンテンツを安全に整列させます。

現在のページを NavLinkまたはその直接の親の NavItemに直接適用できることを示すために、 active 属性を使用してアクティブな状態を示します。

NavLink自体に ariaCurrent 属性も追加する必要があることに注意してください。

Navbar
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList>
     <NavItem>
      <NavLink
       active
       aria-current="page"
      >
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Link</NavLink>
     </NavItem>
     <NavItem>
      <NavLink
       disabled
       aria-current="page"
      >
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

また、ナビゲーションにクラスを使用しているため、必要に応じてリストベースのアプローチを完全に回避できます。

Navbar
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNav>
     <NavLink active>
      Home
     </NavLink>
     <NavLink>Features</NavLink>
     <NavLink>Pricing</NavLink>
     <NavLink disabled>
      Disabled
     </NavLink>
    </NavbarNav>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

ナビゲーションバーのナビゲーションでドロップダウンを利用することもできます。

ドロップダウンメニューには、配置するための折り返し要素が必要なので、以下に示すように、 NavItem コンポーネントと NavLink コンポーネントには別々のネストされた要素を使用してください。

Navbar
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList>
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Features</NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Pricing</NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown Link</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem>Another action</DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-success"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

Forms

さまざまなフォームコントロールとコンポーネントをナビゲーションバー内に配置します。

vue
<template>
 <Navbar
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <BForm
    flex
    role="search"
   >
    <BFormInput
     margin="e-2"
     type="search"
     placeholder="Search"
    />
    <b-button
     color="outline-success"
     type="submit"
    >
     Search
    </b-button>
   </BForm>
  </Container>
 </Navbar>
</template>

コンポーネントの直接の子要素はNavbarフレックスレイアウトを使用し、デフォルトでjustify-content: space-betweenになります。この動作を調整するには、必要に応じて追加の フレックスユーティリティ を使用します。

Navbar
vue
<template>
 <Navbar
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <BForm
    flex
    role="search"
   >
    <BFormInput
     margin="e-2"
     type="search"
     placeholder="Search"
    />
    <b-button
     color="outline-success"
     type="submit"
    >
     Search
    </b-button>
   </BForm>
  </Container>
 </Navbar>
</template>

入力グループも機能します。ナブバーがフォーム全体、あるいはほとんどがフォームの場合は、Container コンポーネントをコンテナとして使用してHTMLを保存することができます。

@
vue
<template>
 <Navbar
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <BInputGroup>
    <BInputGroupText>@</BInputGroupText>
    <BFormInput
     margin="e-2"
     type="search"
     placeholder="Search"
    />
   </BInputGroup>
  </Container>
 </Navbar>
</template>

様々なボタンも、これらのナビゲーションバーフォームの一部としてサポートされています。縦方向の整列ユーティリティを使用して、異なるサイズの要素を整列させることができます。

vue
<template>
 <Navbar
  background-color="body-tertiary"
 >
  <Container
   type="fluid"
   justify-content="start"
  >
   <BForm>
    <b-button
     color="outline-success"
     margin="e-2"
    >
     Main button
    </b-button>
    <b-button
     color="outline-secondary"
     size="sm"
     mergin="e-2"
    >
     Smaller button
    </b-button>
   </BForm>
  </Container>
 </Navbar>
</template>

Text

ナビゲーションバーには、 <NavbarText> コンポーネントを使用してテキストのビットを含めることができます。 このクラスは、テキストの文字列の垂直方向の配置と水平方向の間隔を調整します。
Navbar text with an inline element
vue
<template>
 <Navbar
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarText>Navbar text with an inline element</NavbarText>
  </Container>
 </Navbar>
</template>

必要に応じて、他のコンポーネントやユーティリティと組み合わせて使用します。

Navbar w/ text
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar w/ text</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Features</NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Pricing</NavLink>
     </NavItem>
    </NavbarNavList>
    <NavbarText>Navbar text with an inline element</NavbarText>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

Color schemes

テーマクラスと background-color 属性の組み合わせにより、ナビゲーションバーのテーマ設定がこれまでになく簡単になりました。明るい背景色には .navbar-light から、暗い背景色には .navbar-dark から選択します。 次に、 .bg-* ユーティリティでカスタマイズします。

vue
<template>
 <Navbar
  expand="lg"
  theme="dark"
  background-color="dark"
  border="botton bottom-dark"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink to="/lang-en/components/navbar/">
       Link
      </NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-light"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
 <Navbar
  expand="lg"
  theme="dark"
  background-color="primary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink to="/lang-en/components/navbar/">
       Link
      </NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-light"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
 <Navbar
  expand="lg"
  theme="light"
  style="background-color: #e3f2fd;"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink to="/lang-en/components/navbar/">
       Link
      </NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-light"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

Containers

必須ではありませんが、ナビゲーションバーを Container コンポーネントでラップしてページの中央に配置するか、1つ追加して fixed or static top navbar のコンテンツのみを中央に配置できます。 内部コンテナがまだ必要であることに注意してください。

Navbar
vue
<template>
 <Container>
  <Navbar
   expand="lg"
   background-color="body-tertiary"
  >
   <Container type="fluid">
    <NavbarBrand>Navbar</NavbarBrand>
   </Container>
  </Navbar>
 </Container>
</template>

レスポンシブコンテナのいずれかを使用して、ナビゲーションバーのコンテンツの表示幅を変更します。

Navbar
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="md">
   <NavbarBrand>Navbar</NavbarBrand>
  </Container>
 </Navbar>
</template>

Placement

position utilities を使用して、ナビゲーションバーを静的でない位置に配置することができます。上と下のどちらに固定するかを選択できます。 固定ナビゲーションバーは、position: fixedを使用します。DOMの通常のフローから取得され、他の要素との重複を防ぐために、カスタムCSS（<body>の padding-top など）が必要になる場合があります。

.sticky-topは position:sticky を使用することにも注意してください。サポートブラウザは isn't fully supported in every browser を参考にしてください。.

Default
vue
<template>
 <Navbar
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Default</NavbarBrand>
  </Container>
 </Navbar>
</template>
Fixed top
vue
<template>
 <Navbar
  fixed="top"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Fixed top</NavbarBrand>
  </Container>
 </Navbar>
</template>
Fixed bottom
vue
<template>
 <Navbar
  fixed="bottom"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Fixed bottom</NavbarBrand>
  </Container>
 </Navbar>
</template>
Sticky top
vue
<template>
 <Navbar
  sticky="top"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Sticky top</NavbarBrand>
  </Container>
 </Navbar>
</template>
Sticky bottom
vue
<template>
 <Navbar
  sticky="bottom"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Sticky bottom</NavbarBrand>
  </Container>
 </Navbar>
</template>

Scrolling

scroll 属性を NavbarNavList（または他のnavbarサブコンポーネント）に追加して、折りたたまれたナビゲーションバーの切り替え可能なコンテンツ内で垂直スクロールを有効にします。 デフォルトでは、スクロールは 75vh （またはビューポートの高さの75％）で開始されますが、ローカルのCSSカスタムプロパティ --bs-navbar-height またはカスタムスタイルでオーバーライドできます。 大きなビューポートでは、ナビゲーションバーはデフォルトのナビゲーションバーと同じように表示されます。 この動作には、overflow の潜在的な欠点があることに注意してください。

overflow="y-auto" を設定すると (ここでコンテンツをスクロールするために必要です)、?overflow="x" は auto と同等であり、水平方向のコンテンツが切り取られてしまいます。

ここでは、style="--bs-scroll-height: 100px;" で scroll 属性を使用し、最適な間隔を確保するために余白を設けたナビゲーションバーの例を紹介します。

Navbar
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList
     scroll
     scroll-height="100px"
     margin="e-auto b-2 b-lg-0"
    >
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Link</NavLink>
     </NavItem>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem>Another action</DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-success"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

Responsive behaviors

ナビゲーションバーは、 NavbarToggler コンポーネント、 NavbarCollapse コンポーネント、および expand="{-sm|-md|-lg|-xl|-xxl} 属性を使用して、コンテンツがボタンの後ろで折りたたまれるタイミングを決定できます。他のユーティリティと組み合わせて、特定の要素を表示または非表示にするタイミングを簡単に選択できます。

折りたたまれないナビゲーションバーの場合は、ナビゲーションバーに expand 属性を追加します。常に折りたたまれるナビゲーションバーの場合、 expand 属性を追加しないでください。

Toggler

Navbar togglerはデフォルトでは左揃えですが、navbarBrandのような兄弟要素の後にある場合は、自動的に右端に揃えられます。マークアップを反転すると、togllerの配置も反転します。以下に、さまざまな切り替えスタイルの例を示します。

最小ブレークポイントに navbarBrand コンポーネントが表示されていない場合：

vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarBrand>Hidden brand</NavbarBrand>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Link</NavLink>
     </NavItem>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-success"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

左側にブランド名、右側にトグルを表示します。

Navbar
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Link</NavLink>
     </NavItem>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-success"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

左側にトグル、右側にブランド名を表示します。

Navbar
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarToggler />
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItem>
      <NavLink active>
       Home
      </NavLink>
     </NavItem>
     <NavItem>
      <NavLink>Link</NavLink>
     </NavItem>
     <NavItem>
      <NavLink disabled>
       Disabled
      </NavLink>
     </NavItem>
    </NavbarNavList>
    <BForm
     flex
     role="search"
    >
     <BFormInput
      margin="e-2"
      type="search"
      placeholder="Search"
     />
     <b-button
      color="outline-success"
      type="submit"
     >
      Search
     </b-button>
    </BForm>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

External content

場合によっては、collapseプラグインを使用して、構造的に Navbar の外側にあるコンテンツのコンテナ要素をトリガーする必要があります。プラグインは id と target のマッチングで動作するため、簡単に実行できます。

vue
<template>
 <Collapse id="navbarToggleExternalContent">
  <b-div
   background-color="dark"
   padding="3"
  >
   <h5 class="text-white h4">
    Collapsed content
   </h5>
   <span class="text-body-secondary">Toggleable via the navbar brand.</span>
  </b-div>
 </Collapse>
 <Navbar
  theme="dark"
  background-color="dark"
 >
  <Container type="fluid">
   <NavbarToggler target="#navbarToggleExternalContent" />
  </Container>
 </Navbar>
</template>

これを行うときは、追加のJavaScriptを含めて、コンテナーを開いたときにプログラムでフォーカスをコンテナーに移動することをお勧めします。 そうしないと、キーボードユーザーやスクリーンリーダーを利用するユーザーは、新しく公開されたコンテンツを見つけるのに苦労する可能性があります。特に、開かれたコンテナーがドキュメントの構造のトグルの前にある場合はそうです。 また、トグルにコンテンツコンテナの id を指す aria-controls 属性をつけることをお勧めします。 理論的には、これによりスクリーンリーダーを利用するユーザーはトグルからそれが制御するコンテナーに直接ジャンプできますが、これに対するサポートは現在パッチが当てられています。

Offcanvas

オフキャンバスプラグインを使用して、展開及び折りたたみ可能なナビゲーションバーをオフキャンパスドロワーに変換します。両方のオフキャンバスのデフォルトスタイルを拡張し、expand属性ｗｐ使用して動的で柔軟なナビゲーションサイドバーを作成します。

以下の例では、すべてのブレークポイントにわたって常に折りたたまれるオフキャンバスナビゲーションバーを作成するには、expandを完全に省略します。

Navbar
Offcanvas
vue
<template>
 <Navbar
  background-color="body-tertiary"
  position="fixed-top"
  expand="lg"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler target="#offcanvasRight" />
   <Offcanvas
    id="offcanvasRight"
    placement="end"
   >
    <OffcanvasHeader>
     <OffcanvasTitle>Offcanvas</OffcanvasTitle>
     <CloseButton dismiss="offcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
     <NavbarNavList>
      <NavItem>
       <NavLink active>
        Home
       </NavLink>
      </NavItem>
      <NavItem>
       <NavLink>Link</NavLink>
      </NavItem>
      <NavItem>
       <NavLink disabled>
        Disabled
       </NavLink>
      </NavItem>
     </NavbarNavList>
     <BForm
      flex
      role="search"
     >
      <BFormInput
       margin="e-2"
       type="search"
       placeholder="Search"
      />
      <b-button
       color="outline-success"
       type="submit"
      >
       Search
      </b-button>
     </BForm>
    </OffcanvasBody>
   </Offcanvas>
  </Container>
 </Navbar>
</template>

lgのような特定のブレークポイントで通常のナビゲーションバーに展開するオフキャンバスナビゲーションバーを作成するには、expand="lg"を使用します。

Extend

Mega Menu

use-bootstrap
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand
    to="/"
    padding="0"
    margin="0 e-2 s-md-3 s-xl-0"
   >
    <img
     src="~/assets/img/logo/update/logo4.svg"
     alt="use-bootstrap"
     height="24"
    />
   </NavbarBrand>
   <b-div flex>
    <NavbarToggler />
   </b-div>
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItemDropdown>
      <NavItemDropdownToggle>Basic Dropdown</NavItemDropdownToggle>
      <DropdownMenu>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem to="/lang-en/components/navbar/">
        Another action
       </DropdownItem>
       <DropdownItemDivider />
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItemDropdown>
      <NavItemDropdownToggle>
       MegaMenu
      </NavItemDropdownToggle>
      <DropdownMenu
       mega
       relative-width="100"
      >
       <Row>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3">
         col-lg-3
        </Col>
       </Row>
      </DropdownMenu>
     </NavItemDropdown>
    </NavbarNavList>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

Mega Menu Width

use-bootstrap
vue
<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand
    to="/"
    padding="0"
    margin="0 e-2 s-md-3 s-xl-0"
   >
    <img
     src="~/assets/img/logo/update/logo4.svg"
     alt="use-bootstrap"
     height="24"
    />
   </NavbarBrand>
   <b-div flex>
    <NavbarToggler />
   </b-div>
   <NavbarCollapse>
    <NavbarNavList margin="e-auto b-2 b-lg-0">
     <NavItemDropdown>
      <NavItemDropdownToggle>
       24rem MegaMenu
      </NavItemDropdownToggle>
      <DropdownMenu
       class="un-w-24rem"
      >
       <Row>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3">
         col-lg-3
        </Col>
       </Row>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItemDropdown>
      <NavItemDropdownToggle>
       36rem MegaMenu
      </NavItemDropdownToggle>
      <DropdownMenu
       class="un-w-36rem"
      >
       <Row>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3">
         col-lg-3
        </Col>
       </Row>
      </DropdownMenu>
     </NavItemDropdown>
     <NavItemDropdown>
      <NavItemDropdownToggle>
       W-100 MegaMenu
      </NavItemDropdownToggle>
      <DropdownMenu
       mega
       relative-width="100"
      >
       <Row>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3 mb-3 mb-lg-0">
         col-lg-3
        </Col>
        <Col class="col-lg-3">
         col-lg-3
        </Col>
       </Row>
      </DropdownMenu>
     </NavItemDropdown>
    </NavbarNavList>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

Subtle theme colors

All colors