Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

Offcanvas

いくつかのクラスとJavaScriptプラグインを使って、ナビゲーションやショッピングカートなどのための隠しサイドバーをプロジェクトに組み込むことができます。

On this page

How it works

Offcanvas は、JavaScriptによって切り替え可能で、ビューポートの左端、右端、または下端から表示できるサイドバーコンポーネントです。 ボタンまたはアンカーは、切り替えた特定の要素にアタッチされるトリガーとして使用され、 data 属性は JavaScript を呼び出すために使用されます。

  • Offcanvas は、Modal と同じ JavaScript コードの一部を共有しています。概念的にはよく似ていますが、それぞれ別のプラグインです。
  • Offcanvas のスタイルと寸法のためのいくつかの source Sass 変数は、Modal の変数から継承されています。
  • 表示されている場合、offcanvas にはデフォルトの背景が含まれており、クリックすると offcanvas を隠すことができます。
  • Modal と同様に、一度に表示できるオフキャンバスは1つだけです。

Heads up! CSS によるアニメーションの処理方法を考慮すると、.offcanvas 要素に対して margin や translate を使用することはできません。代わりに、このクラスを独立したラッピング要素として使用してください。

このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存します。アクセシビリティドキュメントの reduced motion セクションを参照してください。

Examples

Offcanvas components

以下は, デフォルトで表示される (.show on .offcanvas による) offcanvas の例です。 Offcanvas には、閉じるボタン付きのヘッダと、初期の padding のためのオプションのボディクラスがサポートされています。可能な限り, offcanvas のヘッダに dismiss アクションを含めるか、明示的な dismiss アクションを提供することをお勧めします。

Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. 
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Live demo

.offcanvas クラスを持つ要素の .show クラスをトグルする JavaScript で、offcanvas 要素の表示/非表示を切り替えるには、以下のボタンを使用します。

  • .offcanvas hides content (default)
  • .offcanvas.show shows content

href 属性でリンクを, data-bs-target 属性でボタンを使うことができます。いずれの場合も、data-bs-toggle="offcanvas" が必要です。

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Placement

offcanvas components のデフォルトの配置はありませんので、以下の修飾クラスのいずれかを追加する必要があります。

  • .offcanvas-start ビューポートの左側にoffcanvasを配置します
  • .offcanvas-end ビューポートの右側にoffcanvasを配置します
  • .offcanvas-top ビューポートの上側にoffcanvasを配置します
  • .offcanvas-bottom ビューポートの下側にoffcanvasを配置します

以下の上、右、下の例を試してみてください。

Offcanvas top
... 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas right
... 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas bottom
... 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Backdrop

Offcanvas とその背景が表示されているときは、<body> 要素のスクロールは無効になります。<body> のスクロールを切り替えるには data-bs-scroll 属性を, 背景を切り替えるには data-bs-backdrop 属性を使用します。

Colored with scrolling

Try scrolling the rest of the page to see this option in action.

Offcanvas with backdrop

.....

Backdroped with scrolling

Try scrolling the rest of the page to see this option in action.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Accessibility

Offcanvas は概念的にはモーダル ダイアログなので, 必ず .offcanvas に aria-labelledby="..." と, Offcanvas のタイトルを参照する記述を追加してください。なお、role="dialog" はすでに JavaScript で追加されているので、追加する必要はありません。

Sass

Variables

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;

Usage

Offcanvas プラグインでは、いくつかのクラスと属性を利用して作業を行います

  • .offcanvas でコンテンツを隠す
  • .offcanvas.show コンテンツを表示
  • .offcanvas-start は, 左のオフキャンバスを隠します。
  • .offcanvas-end は, 右のオフキャンバスを隠します。
  • .offcanvas-bottom は, 下のオフキャンバスを隠します。

dismissボタンを data-bs-disiss="offcanvas" 属性で追加すると、JavaScript の機能が起動します。すべてのデバイスで適切な動作をするために、必ず <button> 要素を一緒に使用してください。

Via data attributes

要素に data-bs-toggle="offcanvas" と data-bs-target または href を追加すると、1つの offcanvas 要素の制御を自動的に割り当てることができます。data-bs-target 属性には、offcanvas を適用するための CSS セレクタを指定します。offcanvas 要素には、必ずクラス offcanvas を追加してください。 デフォルトで開いた状態にしたい場合は、クラス show を追加します。

Via JavaScript

手動で有効にする場合

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Options

オプションは, データ属性や JavaScript で渡すことができます。データ属性の場合は, data-bs- にオプション名を追加して, data-bs-backdrop="" のようにします。

Name Type Default Description
backdrop boolean true Offcanvas が開いている間に body に背景を適用します
keyboard boolean true escape key が押されたときに Offcanvas を閉じます
scroll boolean false Offcanvas が開いている間に body をスクロール可能にします

Methods

非同期のメソッドとトランジション

すべての API メソッドは非同期で、トランジションを開始します。トランジションが開始されると同時に呼び出し元に返されますが、トランジションが終了する前に返されます。また、遷移中のコンポーネントに対するメソッドコールは無視されます。

詳しくは JavaScript のドキュメントをご覧ください。

コンテンツをオフキャンバス要素としてアクティブ化します。オプション object を受け入れます。

コンストラクターを使用してoffcanvasインスタンスを作成できます。次に例を示します。

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Method Description
toggle Offcanvas 要素を表示または非表示に切り替えます。 offcanvas要素が実際に表示または非表示になる前に呼び出し元に戻ります. (shown.bs.offcanvasまたは hidden.bs.offcanvasイベントが発生する前に)
show Offcanvas 要素を表示します. offcanvas要素が実際に表示される前に呼び出し元に戻ります (shown.bs.offcanvasイベントが発生する前).
hide Offcanvas 要素を非表示にします. offcanvas要素が実際に非表示になる前に呼び出し元に戻ります (hidden.bs.offcanvasイベントが発生する前).
getInstance DOM 要素に関連付けられた offcanvas インスタンスを取得する Static メソッドです。

Events

Bootstrap の offcanvas クラスは、offcanvas 機能にフックするためのいくつかのイベントを公開しています。

Event type Description
show.bs.offcanvas このイベントは、showインスタンスメソッドが呼び出されるとすぐに発生します。
shown.bs.offcanvas このイベントは、offcanvas要素がユーザに見えるようになったときに発生します（CSSトランジションが完了するまで待ちます）。
hide.bs.offcanvas このイベントは、hideメソッドが呼び出された直後に発生します。
hidden.bs.offcanvas このイベントは、offcanvas要素がユーザーから隠されたときに発生します（CSSトランジションが完了するまで待ちます）。 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})