NavBar and complex Menu styling

Yii 2.0 General Discussions
1

Hi All,

I am new to Yii and new here.

Really excited by Yii2 since I have discovered it.

Just Amazing.

My first problem and question concern menu in Yii2.

I saw the frontend navigation code but need more control on styles.

So my question, what is the best way to get more controls on the menu items?

I would like to create a multilevel menu with really nested items like below:


<ul class="dropdown-menu">

	<li><a href="#">Level 1</a></li>

	<li><a href="#">Level 1</a></li>

	<li><a href="#">Level 1</a></li>


	<li class="dropdown-submenu"><a href="#">Multi level <i

			class="fa fa-angle-right"></i></a>

		<ul class="dropdown-menu" role="menu">

			<li><a href="#">Second Level</a></li>

			<li><a href="#">Second Level</a></li>

			<li class="dropdown-submenu">

				<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#"> Second Level Link

			 		<i class="fa fa-angle-right"></i>

				</a>

				<ul class="dropdown-menu">

					<li><a href="#">Third Level</a></li>

					<li><a href="#">Third Level</a></li>

					<li><a href="#">Third Level</a></li>

				</ul>

			</li>

		</ul>

	</li>

</ul>

Another example of my menu items is as follow:


<li class="dropdown dropdown-megamenu"><a class="dropdown-toggle"

	data-toggle="dropdown" data-target="#" href="#"> Main menu item </a>

	<ul class="dropdown-menu">

		<li>

			<div class="header-navigation-content">

				<div class="row">

					<div class="col-md-4 header-navigation-col">

						<h4>Submenu Title 1</h4>

						<ul>

							<li><a href="#">Item link</a></li>

							<li><a href="#">Item link</a></li>

							<li><a href="#">Item link</a></li>

						</ul>

					</div>

					<div class="col-md-4 header-navigation-col">

						<h4>Submenu Title 2</h4>

						<ul>

							<li><a href="#">Item link</a></li>

							<li><a href="#">Item link</a></li>

						</ul>

					</div>

					<div class="col-md-4 header-navigation-col">

						<h4>Submenu Title 3</h4>

						<ul>

							<li><a href="#">Item link</a></li>

							<li><a href="#">Item link</a></li>

						</ul>


						<h4>Submenu Title 4</h4>

						<ul>

							<li><a href="#">Item link</a></li>

						</ul>

					</div>

				</div>

			</div>

		</li>

	</ul>

</li>

Just trying to use a mega menu.

Any Tips and Hints?

Best Regards,

-Charles

2

Just playing around, I got a simpler version to work:







echo Nav::widget([

                'options' => ['class' => 'navbar-nav navbar-right'],

                'items' => [

        

                            ['label' => 'Top', 'items' => [

                            ['label' => 'Action', 'url' => '#'],

                            ['label' => 'Another action', 'url' => '#'],

                            ['label' => 'Something else here', 'url' => '#'],

                        ]],

        

                    ],

    

            ]);

You might want to try nesting more arrays, but I have not tested further, and I’m not sure Bootstrap will support a deeper dropdown.

3

Hi Evercode,

Many thanks for your answer.

Yes, it seems the way to go. There are still some default css classes applied to items.

But I will test it more closely.

Best Regards,

-Charles