Get started with bootstrap-side-navbar CDN

MIT licensed

Bootstraps `bootstrap-side-navbar`: Efficient mobile-desktop navigation.

Tags:
  • bootstrap
  • bootstrap5
  • responsive
  • navbar
  • responsive-design
  • side-navbar
  • bootstrap5-template
  • bootstrap-side-navbar
  • bootstrap-sidenav
  • bootstrap-sidebar
  • collapse-component
  • checkout-page

Stable version

Copied!

How to start using bootstrap-side-navbar CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with bootstrap-side-navbar CDN - cdnhub.io</title>
    <!-- Add Bootstrap CSS and Side Navbar CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-side-navbar/1.0.0/bootstrap-side-navbar.min.css">
</head>
<body>
    <!-- Side Navbar -->
    <nav id="sideNavbar" className="side-navbar">
        <ul className="navbar-nav">
            <li className="nav-item">
                <a className="nav-link active" href="#">
                    Dashboard <span className="ms-2 fas fa-tachometer-alt"></span>
                </a>
            </li>
            <li className="nav-item">
                <a className="nav-link" href="#">
                    Orders <span className="ms-2 fas fa-shopping-cart"></span>
                </a>
            </li>
            <li className="nav-item">
                <a className="nav-link" href="#">
                    Customers <span className="ms-2 fas fa-users"></span>
                </a>
            </li>
        </ul>
    </nav>

    <!-- Main Content -->
    <div id="content">
        <!-- Your main content goes here -->
    </div>

    <!-- Add Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <!-- Add Side Navbar JS -->
    <script src="https://cdn.cdnhub.io/bootstrap-side-navbar/1.0.0/bootstrap-side-navbar.min.js"></script>

    <!-- Initialize Side Navbar -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const sideNavbar = new bootstrap.SideNav.DataApi("#sideNavbar");
            sideNavbar.toggle();
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions