Build a Simple Sidebar with Bootstrap 5

Overview

Create a responsive collapsible sidebar layout using Bootstrap 5 components.

Originally published on Jang Keyte's Blog.

This article covers Build a Simple Sidebar with Bootstrap 5 — practical notes from real-world web development experience.

Code Examples

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-auto px-0">
            <div id="sidebar" class="collapse collapse-horizontal show border-end">
                <div id="sidebar-nav" class="list-group border-0 rounded-0 text-sm-start min-vh-100">
                    Nội dung sidebar
                </div>
            </div>
        </div>
        <main class="col ps-md-2 pt-2">
            <a href="#" data-bs-target="#sidebar" data-bs-toggle="collapse" class="border rounded-3 p-1 text-decoration-none"><i class="bi bi-list bi-lg py-2 p-1"></i></a>
            <div class="page-header pt-3">
                <h2>Bootstrap 5 Sidebar Menu - Simple</h2>
            </div>
            <p class="lead">A offcanvas "push" vertical nav menu example.</p>
            <hr>
            <div class="row">
                <div class="col-12">
                    Nội dung content
                </div>
            </div>
        </main>
    </div>
</div>

<ul class="flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="sidebar-menu">
    <li class="d-block w-100">
        <a href="#vespa-menu" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
            <span class="ms-1 d-none d-sm-inline fw-bold text-dark">Vespa</span>
        </a>
        <ul class="collapse nav flex-column ms-1 text-dark" id="vespa-menu" data-bs-parent="#sidebar-menu">
            <li>
                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Vespa</span> GTS</a>
            </li>
            <li>
                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Vespa</span> GTV</a>
            </li>
            <li>
                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Vespa</span> Primavera</a>
            </li>
            <li class="w-100">
                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Vespa</span> Sprint</a>
            </li>
        </ul>
    </li>
    <li class="d-block w-100">
        <a href="#piaggio-menu" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
            <span class="ms-1 d-none d-sm-inline fw-bold text-dark">Piaggio</span>
        </a>
        <ul class="collapse nav flex-column ms-1 text-dark" id="piaggio-menu" data-bs-parent="#sidebar-menu">
            <li class="w-100">
                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Piaggio</span> Liberty</a>
            </li>
            <li>
                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Piaggio</span> Medley</a>
            </li>
        </ul>
    </li>
</ul>

Read More

For the full Vietnamese version, switch language using the VI | EN toggle above, or visit the original post.