Combine navbar and offcanvas bootstrap5 in html

To combine navbar and offcanvas in Bootstrap 5, you can use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navbar and Offcanvas</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" integrity="sha512-2BfX9N4qLcWZlDpZj0J0x/nvF8WkKjEJQ2oB+X4vq3W+mFh0/L1EaOxkxvQ+oQ0YJdH5vi5f5pw5t8g5UJZkUw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link 2</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link 3</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 4</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 5</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 6</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container mt-5">
        <h1>Navbar and Offcanvas Example</h1>
        <p>This is an example of how to combine a navbar and an offcanvas in Bootstrap 5.</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-8JvSxQaA+YzYg1qC8v4XJ1l1OJj0ZQwJ8BvDlHzzI5DdETfWJ0H1h9XhC8MvJ2nVVn5zZtlg/5p5hGnXH5CfNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

This code includes a navbar with a toggler button that activates the offcanvas. The offcanvas contains a list of links, and it appears on the right side of the screen. The navbar has some links on the right side that are collapsed in a dropdown menu on small screens.

You can customize the design and the content of the navbar and the offcanvas to fit your needs.

Combine navbar and offcanvas bootstrap5 in html