→ Moana silva
→ Sidebar navigation with toggle button

Sidebar navigation with toggle button

This bootstrap css example is contributed by Moana silva, on 22-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Navbar

Author Moana silva

v.5.3

Fork Fullscreen

<div class="container-fluid">
    <div class="row">
        
        <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
            <div class="position-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <i class="bi bi-house-door me-2"></i>
                            Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-file-earmark me-2"></i>
                            Orders
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-cart me-2"></i>
                            Products
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-people me-2"></i>
                            Customers
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-graph-up me-2"></i>
                            Reports
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div
                class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">Dashboard</h1>
                <button id="sidebarToggle" class="btn btn-primary d-md-none">
                        <i class="bi bi-list"></i> Toggle Sidebar
                    </button>
            </div>
            <p>Main content goes here.</p>
        </main>
    </div>
</div>

sidebarToggle.addEventListener('click', function() {
                sidebar.classList.toggle('sidebar-hidden');
            });

// Close sidebar when clicking outside on mobile
            body.addEventListener('click', function(event) {
                if (window.innerWidth <= 767.98 && !sidebar.contains(event.target) && !sidebarToggle.contains(event.target)) {
                    sidebar.classList.add('sidebar-hidden');
                }
            });

// Update sidebar visibility on window resize
            window.addEventListener('resize', function() {
                if (window.innerWidth > 767.98) {
                    sidebar.classList.remove('sidebar-hidden');
                }
            });

// Highlight active nav item
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', function() {
                    navLinks.forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
</script>

More Examples

Navbar
a responsive navbar with search

Author:
Prajwal Hallale

1 year ago

5k

v.5.3
Navbar
a responsive navbar with search and sticky ans Header

Author:
almounkez

7 months ago

2.6k

v.5.3
Navbar Specials
Navbar with special design

Author:
almounkez

7 months ago

1.4k

v.5.3
Navbar
Basic Navbar with Dropdown

Author:
Evan Jent

2 months ago

933

v.4.6
navbar
navbar 2 line

Author:
almounkez

7 months ago

1k

v.4.6
Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

1 year ago

820

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

1 year ago

6.7k

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

9 months ago

2.2k

v.5.3
Simple toast messages example
Four different types of toasts: Success (green) Error (red) Warning (yellow) Info (blue) Auto-dismisses after 3 seconds

Author:
Ankit khedkar

7 months ago

1.2k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

10 months ago

6.3k

v.5.3
Sign in with Google

Author:
Juan Martinez

1 year ago

3.4k

v.5.3
Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

1 year ago

1.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent