I am struggling with 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>
I am trying to make it hidden only for xs size. The button should allow users to open and see the entire menu bar. I have looked at the bootstrap documentation but I am unsure how to implement it correctly.