Offcanvas Bootstrap 5

Offcanvas (canvas)

Offcanvas (canvas) é semelhante a um modal (oculto por padrão e exibido ao ativar), mas geralmente é usado como menu de navegação lateral.

Como criar uma lateral offcanvas

O exemplo a seguir mostra como criar uma lateral offcanvas:

Exemplo

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Título</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Alguns textos. Alguns textos. Alguns textos.</p>
    <p>Alguns textos. Alguns textos. Alguns textos.</p>
    <button class="btn btn-secondary" type="button">Botão</button>
  </div>
</div>
<!-- Botão para abrir a lateral offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Abrir lateral Offcanvas
</button>

Experimente pessoalmente

Explicação de exemplo

.offcanvas Classe cria a lateral offcanvas.

.offcanvas-start Classe posiciona a offcanvas e define a largura para 400px. Para mais classes de posicionamento, consulte os exemplos abaixo.

.offcanvas-title Classe garante margens e alturas de linha apropriadas.

Então, adicione seu conteúdo ao .offcanvas-body classe.

Para abrir a lateral offcanvas, você deve usar <button> ou <a> Atributo de direção .offcanvas O id do contêiner (no nosso exemplo é #demo）。

Para usar <a> O elemento abre a lateral offcanvas, você pode usar o atributo href em vez de data-bs-target Atributo de direção #demo.

Posicionamento Offcanvas

Use .offcanvas-start|end|top|bottom Posicione a offcanvas à esquerda, direita, topo ou rodapé:

Exemplo de lado direito

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

Experimente pessoalmente

Exemplo de topo

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

Experimente pessoalmente

Exemplo de rodapé

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

Experimente pessoalmente