Bootstrap components

Offcanvas5.3+

A panel that slides in from the edge of the screen for navigation, filters or details.

An offcanvas keeps secondary content out of the way until the user asks for it: a course index, a filter panel, a cart. It covers part of the page and has a backdrop.

When to use it

Use it

Use it for secondary content or navigation on small screens.
Give it a title and a close button.
Start on the left for navigation and on the right for details.

Don't

Use it for a decision; use a modal.
Open it on its own.
Put the main content of the page in it.

Anatomy

A panel (offcanvas, with a side) with a header (offcanvas-header, offcanvas-title, close) and a body (offcanvas-body), over a dimmed page.

Variants and states

Offcanvas

Unit 1 · Numbers Unit 2 · Functions Unit 3 · Equations

Combinations

Combination	Use it for
Start × navigation	From the left for a course index or a menu.
End × details	From the right for filters or the details of a row.
Offcanvas × small screens	The panel that is a sidebar on a desktop becomes an offcanvas on a phone.

What Didactika changes and why

What we changed	Why it helps
The panel is a surface with a soft deep shadow	It floats over the page and does not look glued to the edge.
The list inside takes the same states as every list	The user already knows how the items answer.

Classes

Class	What it does
`offcanvas`, `offcanvas-start`, `offcanvas-end`	The panel and its side
`offcanvas-header`, `offcanvas-title`, `offcanvas-body`	Its parts
`btn-close`	Close button

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.

Accessibility

Focus moves into the panel and returns to the trigger when it closes.
Escape closes it.
aria-labelledby points at the title.