Laravel - Adding multiple items in navbar based upon items count - laravel

Question

I have a categories table which contains let say 10 columns. Now i want to show all these categories in a navbar in such a way that 5 categories names comes first on the navbar and the rest of the 5 categories should be displayed inside a drop down next to first 5 categories, since in case i have 100 categories i cant loop through them all to show them side by side.
<div class="menu-desktop">
<ul class="main-menu">
#if(count($categories)>0)
#foreach($categories as $category)
<li class="active-menu">
{{ ucwords($category->name) }}
<ul class="sub-menu">
<li>Mens</li>
<li>Women</li>
<li>Both</li>
</ul>
</li>
#endforeach
#endif
</ul>
</div>
currently my view look like that where im just looping through the categories and showing them side by side

Answer 1

One possibility is loop through the first five items using slice inside the foreach. slice returns a slice of the collection starting at the given index. If you would like to limit the size of the returned slice, pass the desired size as the second argument to the method.
Then check if there are more than five categories. If true, loop again through the remaining items.
See my code below, I am using bootstrap but you are not required to. Pay attention to the pair of #if and #foreach.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
#if(count($categories)>0)
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
#foreach($categories->slice(0, 5) as $category)
<li class="nav-item">
<a class="nav-link" href="#">{{ $category->name }}</a>
</li>
#endforeach
#if(count($categories)>5)
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
#foreach($categories->slice(5) as $category)
<a class="dropdown-item" href="#">{{ $category->name }}</a>
#endforeach
</div>
</li>
#endif
</ul>
</div>
#endif
</nav>