Bootstrap 5: Offcanvas

Índice

Fora da tela

Offcanvas é semelhante aos modais (oculto por padrão e mostrado quando ativado), exceto que é frequentemente usado como um menu de navegação na barra lateral.

Some text lorem ipsum.

Como criar uma barra lateral Offcanvas

O exemplo a seguir mostra como criar uma barra lateral offcanvas:

Exemplo

 <!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" 
  id="demo">
  <div 
  class="offcanvas-header">
    <h1 
  class="offcanvas-title">Heading</h1>
    <button 
  type="button" class="btn-close text-reset" 
  data-bs-dismiss="offcanvas"></button>
  </div>
  <div 
  class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    
  <p>Some text lorem ipsum.</p>
    <button class="btn 
  btn-secondary" type="button">A Button</button>
  </div>
</div>
  
<!-- Button to open the offcanvas sidebar -->
<button class="btn 
  btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Open Offcanvas Sidebar
</button>

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Offcanvas Sidebar</h3>
  <p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>

Exemplo explicado

A classe .offcanvas cria a barra lateral offcanvas.

A classe .offcanvas-start posiciona o offcanvas e o torna com 400px de largura. Veja exemplos abaixo para mais classes de posicionamento.

A classe .offcanvas-title garante margens e altura de linha adequadas.

Em seguida, adicione seu conteúdo dentro da classe .offcanvas-body.

Para abrir a barra lateral offcanvas, você deve usar um elemento <button> ou um elemento <a> que aponta para o id do contêiner .offcanvas (#demo em nosso exemplo).

Para abrir a barra lateral offcanvas com um elemento <a>, você pode apontar para #demo com o atributo href , em vez do atributo data-bs-target.

Posição fora da tela

Use .offcanvas-start|end|top|bottom para posicionar o offcanvas à esquerda, direita, superior ou inferior:

Exemplo certo

<div class="offcanvas offcanvas-end" id="demo">

Some text lorem ipsum.

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-end" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Right Offcanvas</h3>
  <p>The .offcanvas-end class positions the offcanvas to the right of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Right Offcanvas
  </button>
</div>

</body>
</html>

Exemplo principal

<div class="offcanvas offcanvas-top" id="demo">

Some text lorem ipsum.

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-top" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Top Offcanvas</h3>
  <p>The .offcanvas-top class positions the offcanvas at the top of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Top Offcanvas
  </button>
</div>

</body>
</html>

Exemplo inferior

   <div class="offcanvas offcanvas-bottom" id="demo">

Some text lorem ipsum.

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-bottom" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Bottom Offcanvas</h3>
  <p>The .offcanvas-bottom class positions the offcanvas at the bottom of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Bottom Offcanvas
  </button>
</div>

</body>
</html>

Menu OffCanvas responsivo

Você também pode controlar quando deseja ocultar ou mostrar o menu offcanvas em diferentes larguras de tela, com as classes .offcanvas-sm|md|lg|xl|xxl:

Exemplo

 <div class="offcanvas offcanvas-start offcanvas-lg" id="demo">

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Responsive Offcanvas Menu</h3>
  <p>You can also hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes.</p>
  <p>In this example, we hide the offcanvas menu on screens larger than 991px wide. Note that we also hide the button that opens the offcanvas (d-lg-none).</p>
  <p class="text-bg-danger">Resize the browser window to see the result.</p>
  <button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>

Menu escuro OffCanvas

Use a classe .text-bg-dark para criar um escuro menu fora da tela.

Dica: também adicionamos a classe .btn-close-white ao .btn-close, para criar um botão branco de fechar que fica bem com o escuro fundo:

Exemplo

<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>

Some text lorem ipsum.

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start text-bg-dark" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Dark Offcanvas Sidebar</h3>
  <p>Use the .text-bg-dark class to create a dark offcanvas menu.</p>
  <p><strong>Tip:</strong> We have also added the .btn-close-white class to .btn-close, to create a white close button that looks nice with the dark background:</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>