Horizontal menu Bootstrap-style
Basic example of usage is this:
$this->widget(
'booster.widgets.TbNavbar',
array(
'brand' => 'Title',
'fixed' => false,
'fluid' => true,
'items' => array(
array(
'class' => 'booster.widgets.TbMenu',
'type' => 'navbar',
'items' => array(
array('label' => 'Home', 'url' => '#', 'active' => true),
array('label' => 'Link', 'url' => '#'),
array('label' => 'Link', 'url' => '#'),
)
)
)
)
);
Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper
leading and color.
To align nav links, use the bootstrap .pull-left or .pull-right utility classes on its
htmlOptions attribute. Both classes will add a CSS float in the specified direction.
Setting the property fixed to false will make the navbar static..
Here's all configuration properties which you can set for TbNavbar widget.
| Property | Description |
|---|---|
type name = default |
description |
TbNavbar allows you to include HTML text too, so to include forms in the navigation bar is quite an easy task.
$this->widget(
'booster.widgets.TbNavbar',
array(
'brand' => 'Title',
'fixed' => false,
'fluid' => true,
'items' => array(
'<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>'
)
)
);
$this->widget(
'booster.widgets.TbNavbar',
array(
'brand' => 'Title',
'fixed' => false,
'fluid' => true,
'items' => array(
array(
'class' => 'booster.widgets.TbMenu',
'type' => 'navbar',
'items' => array(
array('label' => 'Home', 'url' => '#', 'active' => true),
array('label' => 'Link', 'url' => '#'),
array(
'label' => 'Dropdown',
'items' => array(
array('label' => 'Item1', 'url' => '#')
)
),
)
)
)
)
);
Fix the navbar to the top or bottom of the viewport by seeting property
fixed.
Add 'fixed'=>'top' to position the navigration bar to the top.
echo CHtml::openTag('div', array('class' => 'bs-navbar-top-example'));
$this->widget(
'booster.widgets.TbNavbar',
array(
'brand' => 'Title',
'brandOptions' => array('style' => 'width:auto;margin-left: 0px;'),
'fixed' => 'top',
'fluid' => true,
'htmlOptions' => array('style' => 'position:absolute'),
'items' => array(
array(
'class' => 'booster.widgets.TbMenu',
'type' => 'navbar',
'items' => array(
array('label' => 'Home', 'url' => '#', 'active' => true),
array('label' => 'Link', 'url' => '#'),
array('label' => 'Link', 'url' => '#'),
)
)
)
)
);
echo CHtml::closeTag('div');
Add 'fixed'=>'bottom' instead.
echo CHtml::openTag('div', array('class' => 'bs-navbar-bottom-example'));
$this->widget(
'booster.widgets.TbNavbar',
array(
'brand' => 'Title',
'brandOptions' => array('style' => 'width:auto;margin-left: 0px;'),
'fixed' => 'bottom',
'fluid' => true,
'htmlOptions' => array('style' => 'position:absolute'),
'items' => array(
array(
'class' => 'booster.widgets.TbMenu',
'type' => 'navbar',
'items' => array(
array('label' => 'Home', 'url' => '#', 'active' => true),
array('label' => 'Link', 'url' => '#'),
array('label' => 'Link', 'url' => '#'),
)
)
)
)
);
echo CHtml::closeTag('div');
To implement a collapsing responsive navbar, just set the collapse property to true.
$this->widget(
'booster.widgets.TbNavbar',
array(
'type' => null, // null or 'inverse'
'brand' => 'Project name',
'brandUrl' => '#',
'collapse' => true, // requires bootstrap-responsive.css
'fixed' => false,
'fluid' => true,
'items' => array(
array(
'class' => 'booster.widgets.TbMenu',
'type' => 'navbar',
'items' => array(
array('label' => 'Home', 'url' => '#', 'active' => true),
array('label' => 'Link', 'url' => '#'),
array(
'label' => 'Dropdown',
'url' => '#',
'items' => array(
array('label' => 'Action', 'url' => '#'),
array('label' => 'Another action', 'url' => '#'),
array(
'label' => 'Something else here',
'url' => '#'
),
'---',
array('label' => 'NAV HEADER'),
array('label' => 'Separated link', 'url' => '#'),
array(
'label' => 'One more separated link',
'url' => '#'
),
)
),
),
),
'<form class="navbar-form navbar-left" action=""><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div></form>',
array(
'class' => 'booster.widgets.TbMenu',
'type' => 'navbar',
'htmlOptions' => array('class' => 'pull-right'),
'items' => array(
array('label' => 'Link', 'url' => '#'),
'---',
array(
'label' => 'Dropdown',
'url' => '#',
'items' => array(
array('label' => 'Action', 'url' => '#'),
array('label' => 'Another action', 'url' => '#'),
array(
'label' => 'Something else here',
'url' => '#'
),
'---',
array('label' => 'Separated link', 'url' => '#'),
)
),
),
),
),
)
);
Modify the look of the navbar by setting it type property to inverse.
$this->widget(
'booster.widgets.TbNavbar',
array(
'type' => 'inverse',
'brand' => 'Project name',
'brandUrl' => '#',
'collapse' => true, // requires bootstrap-responsive.css
'fixed' => false,
'fluid' => true,
'items' => array(
array(
'class' => 'booster.widgets.TbMenu',
'type' => 'navbar',
'items' => array(
array('label' => 'Home', 'url' => '#', 'active' => true),
array('label' => 'Link', 'url' => '#'),
array(
'label' => 'Dropdown',
'url' => '#',
'items' => array(
array('label' => 'Action', 'url' => '#'),
array('label' => 'Another action', 'url' => '#'),
array(
'label' => 'Something else here',
'url' => '#'
),
'---',
array('label' => 'NAV HEADER'),
array('label' => 'Separated link', 'url' => '#'),
array(
'label' => 'One more separated link',
'url' => '#'
),
)
),
),
),
'<form class="navbar-form navbar-left" action=""><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div></form>',
array(
'class' => 'booster.widgets.TbMenu',
'type' => 'navbar',
'htmlOptions' => array('class' => 'pull-right'),
'items' => array(
array('label' => 'Link', 'url' => '#'),
'---',
array(
'label' => 'Dropdown',
'url' => '#',
'items' => array(
array('label' => 'Action', 'url' => '#'),
array('label' => 'Another action', 'url' => '#'),
array(
'label' => 'Something else here',
'url' => '#'
),
'---',
array('label' => 'Separated link', 'url' => '#'),
)
),
),
),
),
)
);