How to make a mobile menu with columns in Bootstrap5? - html

Question

I have a typical bootstrap navbar that collapses to a dropdown menu on smaller devices. As default menus do, it shows a vertical list of items, which takes up too much space, so I would like to group items in two columns. Here's a drawing of what I mean:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
</div>
</nav>
CodeSandbox code here
I tried grouping it using <div class="col-sm-4"> [three items] </div> but it failed, because I misunderstood how cols work. It grouped items only on the normal navbar, leaving hamburger menu untouched. Unfortunately, all solutions I could find refer to dropdown menus, but it doesn't translate to hamburgers, or at least I can't make it work.
I have no problems using JS if it isn't possible using pure B5/HTML/CSS. Also, I'd like not to change anything in how the standard navbar works on bigger devices, it shouldn't be grouped in any way - I want those columns to be present only on a hamburger menu.

Answer 1

The content of the navbar can be dynamic and there's a lot of ways to show two columns inside the navbar menu.
As a simple solution I used the a row container and columns just to illustrate the possibilities. You can add a divider that shows in mobile which is what is drawn.
Hope this helps and answers your question.
This is just one way to do this (codepen):
<div class="collapse navbar-collapse" id="navbarNav">
<div class="row">
<div class="col">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
<div class="col">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
</div>
</div>
Another possibility is just wrap the <ul> lists with a flex div which will also show the menu as two columns (codepen). I think this is a better solution I just wanted you to have more than one possibility.

Answer 2

Use the grid (row/cols) in the navbar-nav. Use the row-cols-* classes to set the number of columns. This way you won't have to split the columns in your markup.
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-row row g-0 row-cols-2 row-cols-lg-6">
<li class="nav-item col">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
Responsive demo