→ Anonymous
→ Collapsible Sidebar

Collapsible Sidebar

Forked from> @alaric-sloane/collapsible-sidebar

This bootstrap css example is contributed by Anonymous, on 14-Mar-2025. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is drawer

Tags: Sidebar

Author Anonymous

4.5k

v.5.3

Fork Fullscreen

<div class="p-4">
            <h4 class="logo-text fw-bold mb-0">NexusFlow</h4>
            <p class="text-muted small hide-on-collapse">Dashboard</p>
        </div>

<div class="nav flex-column">
            <a href="#" class="sidebar-link active text-decoration-none p-3">
                <i class="fas fa-home me-3"></i>
                <span class="hide-on-collapse">Dashboard</span>
            </a>
            <a href="#" class="sidebar-link text-decoration-none p-3">
                <i class="fas fa-chart-bar me-3"></i>
                <span class="hide-on-collapse">Analytics</span>
            </a>
            <a href="#" class="sidebar-link text-decoration-none p-3">
                <i class="fas fa-users me-3"></i>
                <span class="hide-on-collapse">Customers</span>
            </a>

<a href="#" class="sidebar-link text-decoration-none p-3">
                <i class="fas fa-box me-3"></i>
                <span class="hide-on-collapse">Products</span>
            </a>
            <a href="#" class="sidebar-link text-decoration-none p-3">
                <i class="fas fa-gear me-3"></i>
                <span class="hide-on-collapse">Settings</span>
            </a>
        </div>

<div class="profile-section mt-auto p-4">
            <div class="d-flex align-items-center">
                <img src="https://randomuser.me/api/portraits/women/70.jpg" style="height:60px" class="rounded-circle" alt="Profile">
                <div class="ms-3 profile-info">
                    <h6 class="text-white mb-0">Alex Morgan</h6>
                    <small class="text-muted">Admin</small>
                </div>
            </div>
        </div>
    </nav>
<h1>Heading</h1>
    <script>
        function toggleSidebar() {
            const sidebar = document.querySelector('.sidebar');
            sidebar.classList.toggle('collapsed');
        }
    </script>
    
</div>

More Examples

Interactive Right-Side Menu
A sleek and responsive right sidebar featuring user profile, navigation, and activity feed with modern design elements

Author:
Mason Ashford

8 months ago

6.8k

v.5.3
Collapsible Sidebar

Author:
Alaric Sloane

9 months ago

33.1k

v.5.3
Collapsible Sidebar

Author:
Anonymous

3 months ago

2.6k

v.5.3
Interactive left-Side Menu test
will need to be responsive

Author:
Ben Kremer

4 months ago

3.2k

v.5.3
Collapsible Sidebarteste

Author:
Bruno Dezan

4 months ago

2.9k

v.5.3
Collapsible Sidebarteste

Author:
Bruno Dezan

4 months ago

2.3k

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

11 months ago

5.7k

v.4.6
Features section

Author:
Juan Martinez

1 year ago

1.1k

v.5.3
Steps Section
How it works section

Author:
Ankit khedkar

1 year ago

1.4k

v.5.3
Search with Select using Bootstrap 5
Category filter with search bar

Author:
Omar Khaled

11 months ago

3.7k

v.5.3
minimal pricing cards example

Author:
Anonymous

8 months ago

784

v.5.3
Feature showcase cards

Author:
Mateo Rojas

8 months ago

841

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent