--- layout: examples title: Offcanvas navbar template extra_css: - "offcanvas.css" extra_js: - src: "offcanvas.js" body_class: "bg-light" aliases: "/docs/5.1/examples/offcanvas/" ---

Bootstrap

Since 2011
Recent updates
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}

@username Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?

{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}}

@username Some more representative placeholder content, related to this other user. Another status update, perhaps.

{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}}

@username This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.

All updates
Suggestions
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
Full Name Follow
@username
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
Full Name Follow
@username
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
Full Name Follow
@username
All suggestions