Collapse menu in menuBar (Home section)

user_15778669 0
Viewed 83

I have a problem creating the bootstrap collapse menu.

<div className='collapse' id='mobile-menu'>
          <button
            clasNames='navbar-toggler'
            type='button'
            data-toggle='collapse'
            data-target='#navbarToggleExternalContent'
            aria-controls='navbarToggleExternalContent'
            aria-expanded='false'
            aria-label='Toggle navigation'
          >
            <span className='navbar-toggler-icon'></span>
          </button>
          <div className={clsx('col-auto order-sm-1', styles.menu)} id='mobile-menu'>
            <ul>
              <li>
                <a href='#' className={styles.active}>
                  Home
                </a>
              </li>
              <li>
                <a href='#'>Furniture</a>
              </li>
              <li>
                <a href='#'>Chair</a>
              </li>
              <li>
                <a href='#'>Table</a>
              </li>
              <li>
                <a href='#'>Sofa</a>
              </li>
              <li>
                <a href='#'>Bedroom</a>
              </li>
              <li>
                <a href='#'>Blog</a>
              </li>
            </ul>
          </div>
        </div>

It should be hidden only for xs size. In button and user should be possible to open in and see all menu bar. I used bootstrap documents and I don't know how to do it correctly

bootstrap-5 css html
1 Answers

You need to review the navbar docs for version 5 as the data attribute names have changed from data-* to data-bs-*. You are also targeting the wrong element data-target='#navbarToggleExternalContent' that should be data-bs-target="#mobile-menu". Also you have duplicate id='mobile-menu' elements (invalid HTML).

You want something more like the following:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


<nav class="navbar navbar-expand-sm bg-light" id="mobile-menu-wrapper">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mobile-menu" aria-controls="mobile-menu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="mobile-menu">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Furniture</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Chair</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Table</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sofa</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Bedroom</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
      </ul>

    </div>
  </div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

user_61273930
Related