With Yii 2.0.43 release including bootstrap4 I am looking for a html/css snippet to include a responsive side navigation menu bar. There are extensions that seem too old to try and want to keep this simple - just a block that can be included in the layout and be done. Is that possible?
What’s side navigation menu bar?
Just a vertical menu bar on the side, similar to the horizontal one at the top.
I was able to get something working with the code below, but does not look great. Plus I want to prefer to use the Nav::widget and create a different set of menu items, from the top nav/menu bar.
Code from: Codeply v2
<div class="container-fluid">
<div class="row wrapper min-vh-100 flex-column flex-sm-row">
<aside class="col-12 col-sm-3 p-0 bg-dark flex-shrink-1">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
<a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
<a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
<span class="navbar-toggler-icon"></span>
</a>
<div class="collapse navbar-collapse sidebar">
<ul class="flex-column navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
<i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
</a>
<div class="collapse" id="m1">
<ul class="flex-column nav">
<a class="nav-link px-0 text-truncate" href="#">Sub</a>
<a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
</li>
</ul>
</div>
</nav>
</aside>
<main role="main" class="flex-shrink-0">
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
</main>
</div>
</div>
I tried the 1st link and it works great! Pasted below on how I incorporated it. On the mobile device however, the current top nav, overlaps the left nav. If they were both going to be the same, then this is ideal, but I was planning on having different navigations between top and side. Is there a way to have both show menus one below the other on mobile? I tried addng a line break but that did not help. I can see the 2nd menu when I pull on the body in the mobile, but can’t click it. Any way to shift the left/2nd menu slightly down on Mobile?
<div class="container-fluid">
<div class="row min-vh-100 flex-column flex-md-row">
<div class="col-md-2 pr-md-0 bg-light">
<nav class="navbar navbar-expand-md navbar-light flex-row flex-md-column align-items-start px-0">
<a class="navbar-brand" href="/">
<img src="//placehold.it/30">
</a>
<a class="navbar-toggler" href="#" data-toggle="collapse" data-target="#navbarToggle">
<span class="navbar-toggler-icon"></span>
</a>
<div class="collapse navbar-collapse ml-md-n2" id="navbarToggle">
<?php
NavBar::begin([
//'brandLabel' => Yii::$app->name,
//'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'collapse navbar-collapse ml-md-n2',
],
]);
$menuItems[] = ['label' => 'Another', 'url' => ['/site/login']];
echo Nav::widget([
'options' => ['class' => 'navbar-nav ml-auto flex-column'],
'items' => $menuItems,
]);
NavBar::end();
?>
</div>
</nav>
</div>
<div class="col pt-md-3" id="applicationContentContainer">
<main role="main" class="flex-shrink-0">
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
</main>
</div>
</div>
</div>
The 2nd Codeply link also works, but creates an undesired empty block across the left menu pushing the main content down. Same issue on Mobile as well where the second menu is hidden behind the first.
And thank you so much! Can’t tell you how much I appreciate your help.
I haven’t created these, just found it so can’t help with customization.
Take a look at AdminLTE template. It’s pretty nice and can easily be integrated into Yii2 project
AdminLTE looks great! There is even an Yii asset bundle for the earlier release. I will have to spend some time on it. Thanks!