Offcanvas

How it works

Offcanvas は、切り替え可能で、ビューポートの左端、右端、または下端から表示できるサイドバーコンポーネントです。

表示されている場合、offcanvas にはデフォルトの背景が含まれており、クリックすると offcanvas を隠すことができます。

Modal と同様に、一度に表示できるオフキャンバスは1つだけです。

Heads up! CSS によるアニメーションの処理方法を考慮すると、Offcanvas 要素に対して margin や translate を使用することはできません。

代わりに、このクラスを独立したラッピング要素として使用してください。

Examples

Offcanvas components

以下は, デフォルトで表示される (show on Offcanvas による) offcanvas の例です。

Offcanvas には、閉じるボタン付きのヘッダと、初期の padding のためのオプションのボディクラスがサポートされています。

可能な限り, offcanvas のヘッダに dismiss アクションを含めるか、明示的な dismiss アクションを提供することをお勧めします。

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

vue

<template>
 <Offcanvas
  placement="start"
  show
  :backdrop="false"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Offcanvas</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   Content for the offcanvas goes here. You can place just about any
   Bootstrap component or custom elements here.
  </OffcanvasBody>
 </Offcanvas>
</template>

Live demo

Offcanvasコンポーネントの表示・非表示を切り替えるには、hrefまたはtarget属性と、toggle="offcanvas"を指定したボタンを使用できます。

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasExample"
 >
  Launch demo modal
 </b-button>
 <Offcanvas
  id="offcanvasExample"
  placement="start"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Offcanvas</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <div>
    Some text as placeholder. In real life you can have the elements you
    have chosen. Like, text, images, lists, etc.
   </div>
   <Dropdown margin="t-3">
    <DropdownToggle color="secondary">
     Droppdown button
    </DropdownToggle>
    <DropdownMenu>
     <DropdownItem>Action</DropdownItem>
     <DropdownItem>Another action</DropdownItem>
     <DropdownItem>Something else here</DropdownItem>
    </DropdownMenu>
   </Dropdown>
  </OffcanvasBody>
 </Offcanvas>
</template>

Body scrolling

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasBodyScrolling"
 >
  Launch demo modal
 </b-button>
 <Offcanvas
  id="offcanvasBodyScrolling"
  placement="start"
  scroll
  :backdrop="false"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <div>
    Some text as placeholder. In real life you can have the elements you
    have chosen. Like, text, images, lists, etc.
   </div>
   <Dropdown margin="t-3">
    <DropdownToggle color="secondary">
     Droppdown button
    </DropdownToggle>
    <DropdownMenu>
     <DropdownItem>Action</DropdownItem>
     <DropdownItem>Another action</DropdownItem>
     <DropdownItem>Something else here</DropdownItem>
    </DropdownMenu>
   </Dropdown>
  </OffcanvasBody>
 </Offcanvas>
</template>

Body scrolling and backdrop

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasBodyScrollingBackdrop"
 >
  Launch demo modal
 </b-button>
 <Offcanvas
  id="offcanvasBodyScrollingBackdrop"
  placement="start"
  scroll
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <div>
    Some text as placeholder. In real life you can have the elements you
    have chosen. Like, text, images, lists, etc.
   </div>
   <Dropdown margin="t-3">
    <DropdownToggle color="secondary">
     Droppdown button
    </DropdownToggle>
    <DropdownMenu>
     <DropdownItem>Action</DropdownItem>
     <DropdownItem>Another action</DropdownItem>
     <DropdownItem>Something else here</DropdownItem>
    </DropdownMenu>
   </Dropdown>
  </OffcanvasBody>
 </Offcanvas>
</template>

Static backdrop

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasStaticBackdrop"
 >
  Launch demo modal
 </b-button>
 <Offcanvas
  id="offcanvasStaticBackdrop"
  placement="start"
  backdrop="static"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <div>
    Some text as placeholder. In real life you can have the elements you
    have chosen. Like, text, images, lists, etc.
   </div>
   <Dropdown margin="t-3">
    <DropdownToggle color="secondary">
     Droppdown button
    </DropdownToggle>
    <DropdownMenu>
     <DropdownItem>Action</DropdownItem>
     <DropdownItem>Another action</DropdownItem>
     <DropdownItem>Something else here</DropdownItem>
    </DropdownMenu>
   </Dropdown>
  </OffcanvasBody>
 </Offcanvas>
</template>

Responsive

Resize your browser to show the responsive offcanvas toggle.

This is content within an .offcanvas-lg.

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasResponsive"
  display="lg-none"
 >
  Toggle offcanvas
 </b-button>
 <Alert
  theme="info"
  display="none lg-block"
 >
  Resize your browser to show the responsive offcanvas toggle.
 </Alert>

 <Offcanvas
  id="offcanvasResponsive"
  placement="end"
  type="lg"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Responsive offcanvas</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <b-p margin="b-0">
    This is content within an <code>.offcanvas-lg</code>.
   </b-p>
  </OffcanvasBody>
 </Offcanvas>
</template>

Placement

offcanvasコンポーネントにはデフォルトの配置がないため、以下のモディファイアクラスのいずれかを追加する必要があります。

placement="start" ビューポートの左側にoffcanvasを配置します
placement="end" ビューポートの右側にoffcanvasを配置します
placement="top" ビューポートの上部にoffcanvasを配置します
placement="bottom" ビューポートの下部にoffcanvasを配置します

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

...

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasTop"
 >
  Launch demo modal
 </b-button>
 <Offcanvas
  id="offcanvasTop"
  placement="top"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>...</OffcanvasBody>
 </Offcanvas>
</template>

...

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasRight"
 >
  Toggle right offcanvas
 </b-button>
 <Offcanvas
  id="offcanvasRight"
  placement="end"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>...</OffcanvasBody>
 </Offcanvas>
</template>

...

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasBottom"
 >
  Toggle bottom offcanvas
 </b-button>
 <Offcanvas
  id="offcanvasBottom"
  placement="bottom"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody small>
   ...
  </OffcanvasBody>
 </Offcanvas>
</template>

Backdrop

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

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

vue

<template>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasScrolling"
 >
  Enable body scrolling
 </b-button>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasWithBackdrop"
 >
  Enable backdrop (default)
 </b-button>
 <b-button
  color="primary"
  toggle="offcanvas"
  target="#offcanvasScrolling"
 >
  Enable both scrolling & backdrop
 </b-button>
 <Offcanvas
  id="offcanvasScrolling"
  placement="start"
  scroll
  backdrop="false"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <p>Try scrolling the rest of the page to see this option in action.</p>
  </OffcanvasBody>
 </Offcanvas>
 <Offcanvas
  id="offcanvasWithBackdrop"
  placement="start"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <p>Try scrolling the rest of the page to see this option in action.</p>
  </OffcanvasBody>
 </Offcanvas>
 <Offcanvas
  id="offcanvasWithBothOptions"
  placement="start"
  scroll
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <p>Try scrolling the rest of the page to see this option in action.</p>
  </OffcanvasBody>
 </Offcanvas>
</template>

Methods

Demo

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

vue

<template>
 <b-button
  type="button"
  color="primary"
  @click="toggleClicked"
 >
  Toggle
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="showClicked"
 >
  Show
 </b-button>
 <Offcanvas
  ref="demoOffcanvas"
  placement="bottom"
  scroll
  backdrop="false"
 >
  <OffcanvasHeader>
   <OffcanvasTitle>Colored with scrolling</OffcanvasTitle>
   <CloseButton dismiss="offcanvas" />
  </OffcanvasHeader>
  <OffcanvasBody>
   <p>Try scrolling the rest of the page to see this option in action.</p>
   <b-button
    type="button"
    color="primary"
    @click="hideClicked"
   >
    Hide
   </b-button>
  </OffcanvasBody>
 </Offcanvas>
</template>

<script setup lang="ts">
const demoOffcanvas = ref(null);

const toggleClicked = () => {
 if (demoOffcanvas.value) {
  demoOffcanvas.value.toggle();
 }
};
const hideClicked = () => {
 if (demoOffcanvas.value) {
  demoOffcanvas.value.hide();
 }
};
const showClicked = () => {
 if (demoOffcanvas.value) {
  demoOffcanvas.value.show();
 }
};
</script>

Bootstrap

Browse docs

Offcanvas

How it works

Examples

Offcanvas components

Offcanvas

Live demo

Offcanvas

Body scrolling

Colored with scrolling

Body scrolling and backdrop

Colored with scrolling

Static backdrop

Colored with scrolling

Responsive

Responsive offcanvas

Placement

Colored with scrolling

Colored with scrolling

Colored with scrolling

Backdrop

Colored with scrolling

Colored with scrolling

Colored with scrolling

Methods

Demo

Colored with scrolling