Loading...
Silicon Silicon UI Kit
 Buy now

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, widgets etc.

Bootstrap docs
Left offcanvas

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

Right offcanvas

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

Top offcanvas

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

Bottom offcanvas

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

Offcanvas components

Menu

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="offcanvas" tabindex="-1">

  <!-- Header -->
  <div class="offcanvas-header border-bottom">
    <h3 class="offcanvas-title fs-lg">Menu</h3>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <!-- Body -->
  <div class="offcanvas-body py-3 px-2">
    <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Our Works</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Our Team</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contacts</a>
    </li>
  </ul>
</div>

  <!-- Footer -->
  <div class="offcanvas-header d-flex border-top">
    <button class="btn btn-outline-primary btn-sm w-100 me-2" type="button">
      <i class="bx bx-log-in fs-base me-2"></i>
      Sign In
    </button>
    <button class="btn btn-primary btn-sm w-100" type="button">
      <i class="bx bx-user fs-base me-2"></i>
      Sign Up
    </button>
  </div>
</div>

Placement

<!-- Offcanvas position: Left -->

<!-- Toogle button -->
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft">Toggle left offcanvas</button>

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


<!-- Offcanvas position: Right -->

<!-- Toogle button -->
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">Toggle right offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title">Right offcanvas</h5>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
  </div>
</div>


<!-- Offcanvas position: Top -->

<!-- Toogle button -->
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop">Toggle top offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-top" id="offcanvasTop" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title">Top offcanvas</h5>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
  </div>
</div>


<!-- Offcanvas position: Bottom -->

<!-- Toogle button -->
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom">Toggle bottom offcanvas</button>

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

Mobile menu offcanvas (responsive)

<!-- Navbar with offcanvas menu on mobile -->
<header class="navbar navbar-expand-lg bg-light shadow-sm">
  <div class="container">
    <a href="#" class="navbar-brand flex-shrink-0">
      <img src="assets/img/logo.svg" width="47" alt="Silicon">
      Silicon
    </a>
    <button type="button" class="navbar-toggler ms-auto" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" id="navbarNav">
      <div class="offcanvas-header shadow-sm">
        <h6 class="offcanvas-title">Menu</h6>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <ul class="navbar-nav offcanvas-body pt-3">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li>
              <a href="#" class="dropdown-item">Action link</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-item dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#" class="dropdown-item">Action link</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Another action</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Something else here</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Yet another link</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#" class="dropdown-item">Another action</a>
            </li>
            <li>
              <a href="#" class="dropdown-item">Something else here</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</header>
Top