Customizing bootstrap.widgets.TbMenu

Question

I'm using Yii Booster and i'm trying to make my list look like this, with the same ID's and CLASS's

<div id="sidebar-nav">
        <ul id="dashboard-menu">
            <li class="active">
                <div class="pointer">
                    <div class="arrow"></div>
                    <div class="arrow_border"></div>
                </div>
                <a href="index.html">
                    <i class="icon-home"></i>
                    <span>Home</span>
                </a>
            </li>            
            <li>
                <a href="chart-showcase.html">
                    <i class="icon-signal"></i>
                    <span>Charts</span>
                </a>
            </li>
            <li>
                <a class="dropdown-toggle" href="#">
                    <i class="icon-group"></i>
                    <span>Users</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    <li><a href="user-list.html">User list</a></li>
                    <li><a href="new-user.html">New user form</a></li>
                    <li><a href="user-profile.html">User profile</a></li>
                </ul>
            </li>
        </ul>
    </div>

so far i've done this.. and not sure how to do the submenu for Users too. Any ideas on how to do the submenu and add the proper class and ID's?

<div id="sidebar-nav">
    $this->widget('bootstrap.widgets.TbMenu', array(
            'type' => 'list',
            'items' => array(array('label' => 'Home', 'icon' => 'home', 'url' => array('default/index#'), 'active' => true),
                array('label' => 'Charts', 'icon' => 'icon-signal', 'url' => array('demo1')),
                array('label' => 'Users', 'icon' => 'icon-group', 'url' => array('demo2')),
        ));
</div>

Also, i noticed Yii always adds an ID to html like

<input id="yw0" class="nav nav-list" />

is there a way to remove this?

Thanks in advance

score 3 · Answer 1 · answered Sep 25 '14 at 12:26

This is only show in right side of Navigation with icon and login logout option ... and its working fine .....

        array(
            'class' => 'bootstrap.widgets.TbMenu',
            'htmlOptions' => array('class' => 'pull-right'),
            'items' => array(
                array('label' => 'Welcome..' . Yii::app()->user->name . '', 'url' => '#','icon' => 'icon-user icon-white'),
                array('label' => '', 'url' => '#', 'items' => array(
                        array('label' => 'Login', 'url' => array('/site/login'), 'visible' => Yii::app()->user->isGuest),
                        array('label' => 'Logout', 'url' => array('/site/logout'), 'visible' => !Yii::app()->user->isGuest, 'itemOptions' => array(
                                'class' => ''
                            )),
                    )),
            ),
        ),

Thanks http://about.me/sudeep_dk

score 1 · Answer 2 · answered Mar 06 '14 at 11:24

1

TbMenu is still a CMenu, you can find all the details about the CMenu including examples here http://www.yiiframework.com/doc/api/1.1/CMenu.
You should not care about the IDs they really are harmless.
For the classes that are added you can control them with itemCssClass.

answered Mar 06 '14 at 11:24

Mihai P.

9,307
3
38
49

unfortunately i find Yii's documentation a bit confusing. i can't seem to get it to work. Plus i don't understand why we have to use a widget, when i could use just html? – user2636556 Mar 06 '14 at 12:11
2

You are not forced to use Yii widgets - the form is normal HTML code. Some people find using the Yii functions easier. If you don;t want to, go ahead and use normal HTML. You can even mix Yii-like form code and normal HTML - just be aware of how Yii handles form fields eg, an input form's name will be – crafter Mar 07 '14 at 04:28

Customizing bootstrap.widgets.TbMenu

2 Answers2