Yii 2 Dropdown Navigation and Menu tutorial
I would like to extend a warm welcome to all our friends from around the world who are just discovering this blog. Doing this blog, and seeing all the traffic from so many countries, it really does show me how much we all have in common, no matter where we are from. International bounderies are just an artificial construct, and not necessarily a good one. But as programmers and developers, we get to transcend all that and play in a very fun space.
Speaking of fun, over 1000 developers have taken part in the polls on this site, and I would encourage you to participate, either by voting or commenting or doing both, let your voice be heard.
You may have heard me say this before and most likely, you will hear me say it again:
Thanks to everyone who has bought Yii 2 For Beginners, I appreciate your support.
Now anyone who knows me knows that I try to avoid frontend development as much as possible. It’s like God invented frontend development just to irritate backend developers, who otherwise just enjoy coding a little too much. But with Yii 2’s native integration of Bootstrap 3, a mobile responsive css out of the box, there’s no reason to feel that way.
Yii 2 has a number widgets that make integrating with Bootstrap easy. The tricky part is finding the documentation on them. I was following the forum and saw a lot of questions on Dropdown Navigation or a dropdown menu, as in, how do we do it? That’s a really basic question, everyone will need this at one point or another.
Now trying to be helpful, I searched for the answer and came up with nothing. I even dug into the source code of the widgets to see if I could figure it out. Somewhere along the way, I figured it out. Of course I have no way to know if this is the “official way” to do it, but I’ve tested it and it works. So here is the implementation:
Yii 2 Dropdown Navigation:
echo Nav::widget([ 'options' => ['class' => 'navbar-nav navbar-right'], 'items' => [ ['label' => 'Top Label', 'items' => [ ['label' => 'Action', 'url' => '#'], ['label' => 'Another action', 'url' => '#'], ['label' => 'Something else here', 'url' => '#'], ]], ], ]);
Turns out it’s just a nested array inside the items array. So simple! I know they are working on the documentation and that Yii 2 has just been released, so we all just have to have patience as they put all the docs together. They are doing a good job of it, the doucmentation they have is clear, we just need more of it.
Another request I see often in the forum is for a working RBAC solution. I’ve developed a nice solution in Yii 2 For Beginners, it’s easy to implement, with a full backend UI, but it’s one of the more extended lessons in the book and it’s too big for a blog post.
Getting back to the Yii 2 DropDown Navigation widget, please remember you have to echo the widget inside the view. That means you have to place it within Php tags. Also, if you want to the dropdown navigation inside the existing Navbar widget that comes with the default Yii 2 installation, you need to place it somewhere within the widget begin and widget end tags:
NavBar::begin([ 'brandLabel' => 'Yii 2 Build <i class="fa fa-plug"></i>', 'brandUrl' => Yii::$app->homeUrl, 'options' => [ 'class' => 'navbar-inverse navbar-fixed-top', ], ]); //your nav widget somewhere inbetween. NavBar::end();
Another tip is you can see I included a call to font-awesome’s fa fa-plug in the brandLabel parameter of the NavBar widget. Font-awesome is a great library and most likely, you will want to include in your project. It’s also a topic, we cover in the book.
Just keep in mind that if you come up against a situation like not knowing how to do a dropdown menu in Yii 2, the answer is out there and someone will help you. The Yii 2 community is very active and willing to help. It’s a great framework and I’m committed to helping you make the most of it.