OffCanvas é um plug -in Bootstrap 5 para um menu da barra lateral que aparece na tela da esquerda, direita ou inferior conforme os requisitos do usuário. OffCanvas pode ser usado como um menu secundário ou o menu principal também e pode ser acionado por um botão ou um link. Quando a barra lateral off-canvas é acionada, ele bloqueia a página de qualquer tipo de interação, porque quando o menu se revela a página se esconde atrás dela.

Este artigo fornecerá um guia detalhado sobre:

• Como criar a barra lateral offcanvas
• Posições diferentes da barra lateral offcanvas

Como criar a barra lateral offcanvas

Para criar uma barra lateral offcanvas, adicione .OffCanvas classe em uma tag div com sua posição de revelar .OffCanvas-iniciado e um único eu ia. Depois, envolva esta div em torno de uma div com a classe .OffCanvas-cabeçalho que contém o título da barra lateral com seu botão de demissão e uma div com a classe .OffCanvas-Body que contém o conteúdo da barra lateral.

Por fim, para desencadear o uso da barra lateral offcanvas data-bs-toggle = "OffCanvas" e Data-Bs-Target = ”#ID” Para conectar a barra lateral com um botão ou um link que, ao clicar, revela a barra lateral offcanvas:

Código

Cardápio

Lar
Sobre
produtos
Contate-nos
Configurações

Barra lateral offcanvas

O botão abaixo será aberto na barra lateral offcanvas.

Abrir

É assim que você cria uma barra lateral offcanvas no bootstrap 5.

Posições OffCanvas

O OffCanvas BARBAR pode ser revelado a partir de qualquer borda da tela conforme o requisito do usuário. Para especificar a posição offcanvas, basta adicionar .OffCanvas-Start/End/Top/Bottom classe com .OffCanvas aula.

Começar

.OffCanvas-iniciado A classe revelará a barra lateral do lado esquerdo da página.

Fim

.OffCanvas-End A classe revelará a barra lateral do lado direito da página.

Principal

.OffCanvas-top A classe revelará a barra lateral do lado superior da página.

Fundo

.OffCanvas-Bottom A classe revelará a barra lateral do lado inferior da página.

Conclusão

OffCanvas A barra lateral é criada adicionando .OffCanvas classe para uma div. Em seguida, adicione .OffCanvas-Start/End/Top/Bottom para especificar a posição da barra lateral e eu ia atributo para dar à barra lateral um ID único. Depois envolva esta div em torno de uma div com a classe .OffCanvas-cabeçalho que contém o título da barra lateral com seu botão de demissão e uma div com a classe .OffCanvas-Body que contém o conteúdo da barra lateral. Agora para acionar o uso da barra lateral offcanvas data-bs-toggle = "OffCanvas" e Data-Bs-Target = ”#ID” Para conectar a barra lateral com um botão ou um link que, ao clicar, revela a barra lateral offcanvas.