Class yii\bootstrap5\NavBar
| Inheritance | yii\ |
|---|---|
| Uses Traits | yii\ |
| Source Code | https://github.com/yiisoft/yii2-bootstrap5/blob/master/src/NavBar.php |
NavBar renders a navbar HTML component.
Any content enclosed between the begin() and end() calls of NavBar
is treated as the content of the navbar. You may use widgets such as yii\
use yii\bootstrap5\NavBar;
use yii\bootstrap5\Nav;
NavBar::begin(['brandLabel' => 'NavBar Test']);
echo Nav::widget([
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
],
'options' => ['class' => 'navbar-nav'],
]);
NavBar::end();
See also https://getbootstrap.com/docs/5.1/components/navbar/.
Public Properties
| Property | Type | Description | Defined By |
|---|---|---|---|
| $brandImage | string|boolean | Src of the brand image or false if it's not used. | yii\ |
| $brandImageOptions | array | The HTML attributes of the brand image. | yii\ |
| $brandLabel | string|boolean | The text of the brand or false if it's not used. | yii\ |
| $brandOptions | array | The HTML attributes of the brand link. | yii\ |
| $brandUrl | array|string|boolean | The URL for the brand's hyperlink tag. | yii\ |
| $clientEvents | array | The event handlers for the underlying Bootstrap JS plugin. | yii\ |
| $clientOptions | yii\ |
||
| $collapseOptions | array|boolean | The HTML attributes for the collapse container tag. | yii\ |
| $containerOptions | array | yii\ |
|
| $innerContainerOptions | array | The HTML attributes of the inner container. | yii\ |
| $offcanvasOptions | array|boolean | The HTML attributes for the offcanvas container tag. | yii\ |
| $options | array | The HTML attributes for the widget container tag. | yii\ |
| $renderInnerContainer | boolean | Whether the navbar content should be included in an inner div container which by default adds left and right padding. | yii\ |
| $screenReaderToggleText | string | Text to show for screen readers for the button to toggle the navbar. | yii\ |
| $togglerContent | string | The toggle button content. | yii\ |
| $togglerOptions | array | The HTML attributes of the navbar toggler button. | yii\ |
Public Methods
| Method | Description | Defined By |
|---|---|---|
| init() | yii\ |
|
| run() | Renders the widget. | yii\ |
| setContainerOptions() | Container options setter for backwards compatibility | yii\ |
Protected Methods
| Method | Description | Defined By |
|---|---|---|
| registerClientEvents() | Registers JS event handlers that are listed in $clientEvents. | yii\ |
| registerPlugin() | Registers a specific Bootstrap plugin/component and the related events. | yii\ |
| renderToggleButton() | Renders collapsible toggle button. | yii\ |
Property Details
Src of the brand image or false if it's not used. Note that this param will override $this->brandLabel param.
See also https://getbootstrap.com/docs/5.1/components/navbar/.
The HTML attributes of the brand image.
See also \
The text of the brand or false if it's not used. Note that this is not HTML-encoded.
See also https://getbootstrap.com/docs/5.1/components/navbar/.
The HTML attributes of the brand link.
See also \
The URL for the brand's hyperlink tag. This parameter will be processed by \null if you want to have no link at all.
The HTML attributes for the collapse container tag. The following special options are recognized:
- tag: string, defaults to "div", the name of the container tag.
See also \
The HTML attributes of the inner container.
See also \
The HTML attributes for the offcanvas container tag.
See also \
The HTML attributes for the widget container tag. The following special options are recognized:
- tag: string, defaults to "nav", the name of the container tag.
See also \
Whether the navbar content should be included in an inner div container which by default adds left and right padding. Set this to false for a 100% width navbar.
Text to show for screen readers for the button to toggle the navbar.
The toggle button content. Defaults to bootstrap 5 default <span class="navbar-toggler-icon"></span>
The HTML attributes of the navbar toggler button.
See also \
Method Details
| public void init ( ) |
public function init(): void
{
parent::init();
if (!isset($this->options['class']) || empty($this->options['class'])) {
Html::addCssClass($this->options, [
'widget' => 'navbar',
'toggle' => 'navbar-expand-lg',
'navbar-light',
'bg-light',
]);
} else {
Html::addCssClass($this->options, [
'widget' => 'navbar',
]);
}
$navOptions = $this->options;
$navTag = ArrayHelper::remove($navOptions, 'tag', 'nav');
$brand = '';
if (!isset($this->innerContainerOptions['class'])) {
Html::addCssClass($this->innerContainerOptions, [
'panel' => 'container',
]);
}
if ($this->collapseOptions !== false && !isset($this->collapseOptions['id'])) {
$this->collapseOptions['id'] = "{$this->options['id']}-collapse";
} elseif ($this->offcanvasOptions !== false && !isset($this->offcanvasOptions['id'])) {
$this->offcanvasOptions['id'] = "{$this->options['id']}-offcanvas";
}
if ($this->brandImage !== false) {
$this->brandLabel = Html::img($this->brandImage, $this->brandImageOptions);
}
if ($this->brandLabel !== false) {
Html::addCssClass($this->brandOptions, [
'widget' => 'navbar-brand',
]);
if ($this->brandUrl === null) {
$brand = Html::tag('span', $this->brandLabel, $this->brandOptions);
} else {
$brand = Html::a(
$this->brandLabel,
$this->brandUrl === false ? Yii::$app->homeUrl : $this->brandUrl,
$this->brandOptions,
);
}
}
ob_start();
echo Html::beginTag($navTag, $navOptions) . "\n" ;
if ($this->renderInnerContainer) {
echo Html::beginTag('div', $this->innerContainerOptions) . "\n" ;
}
echo $brand . "\n" ;
echo $this->renderToggleButton() . "\n" ;
if ($this->collapseOptions !== false) {
Html::addCssClass($this->collapseOptions, [
'collapse' => 'collapse',
'widget' => 'navbar-collapse',
]);
$collapseOptions = $this->collapseOptions;
$collapseTag = ArrayHelper::remove($collapseOptions, 'tag', 'div');
echo Html::beginTag($collapseTag, $collapseOptions) . "\n" ;
} elseif ($this->offcanvasOptions !== false) {
Offcanvas::begin($this->offcanvasOptions);
}
}
Defined in:
yii\
Registers JS event handlers that are listed in $clientEvents.
| protected void registerClientEvents ( ?string $name = null ) | ||
| $name | ?string | |
protected function registerClientEvents(?string $name = null): void
{
if (!empty($this->clientEvents)) {
$id = $this->options['id'];
$js = [];
$appendix = ($name === 'dropdown') ? '.parentElement' : '';
foreach ($this->clientEvents as $event => $handler) {
$js[] = "document.getElementById('$id')$appendix.addEventListener('$event', $handler);";
}
$this->getView()->registerJs(implode("\n" , $js));
}
}
Defined in:
yii\
Registers a specific Bootstrap plugin/component and the related events.
| protected void registerPlugin ( string $name ) | ||
| $name | string |
The name of the Bootstrap plugin |
protected function registerPlugin(string $name): void
{
/**
* @see https://github.com/twbs/bootstrap/blob/v5.2.0/js/index.esm.js
*/
$jsPlugins = [
'alert',
'button',
'carousel',
'collapse',
'dropdown',
'modal',
'offcanvas',
'popover',
'scrollspy',
'tab',
'toast',
'tooltip',
];
if (in_array($name, $jsPlugins, true)) {
$view = $this->getView();
BootstrapPluginAsset::register($view);
// 'popover', 'toast' and 'tooltip' plugins not activates via data attributes
if ($this->clientOptions !== false || in_array($name, ['popover', 'toast', 'tooltip'], true)) {
$name = ucfirst($name);
$id = $this->options['id'];
$options = empty($this->clientOptions) ? '{}' : Json::htmlEncode($this->clientOptions);
$view->registerJs("(new bootstrap.$name('#$id', $options));");
}
$this->registerClientEvents($name);
}
}
Renders collapsible toggle button.
| protected string renderToggleButton ( ) | ||
| return | string |
The rendering toggle button. |
|---|---|---|
protected function renderToggleButton(): string
{
if ($this->collapseOptions === false && $this->offcanvasOptions === false) {
return '';
}
$options = $this->togglerOptions;
Html::addCssClass($options, [
'widget' => 'navbar-toggler',
]);
if ($this->offcanvasOptions !== false) {
$bsData = [
'bs-toggle' => 'offcanvas',
'bs-target' => '#' . $this->offcanvasOptions['id'],
];
$aria = $this->offcanvasOptions['id'];
} elseif ($this->collapseOptions !== false) {
$bsData = [
'bs-toggle' => 'collapse',
'bs-target' => '#' . $this->collapseOptions['id'],
];
$aria = $this->collapseOptions['id'];
}
return Html::button(
$this->togglerContent,
ArrayHelper::merge($options, [
'type' => 'button',
'data' => $bsData,
'aria' => [
'controls' => $aria,
'expanded' => 'false',
'label' => $this->screenReaderToggleText ?: Yii::t('yii/bootstrap5', 'Toggle navigation'),
],
]),
);
}
Renders the widget.
| public string run ( ) |
public function run(): string
{
if ($this->collapseOptions !== false) {
$tag = ArrayHelper::remove($this->collapseOptions, 'tag', 'div');
echo Html::endTag($tag) . "\n" ;
} elseif ($this->offcanvasOptions !== false) {
Offcanvas::end();
}
$content = ob_get_clean();
if ($this->renderInnerContainer) {
$content .= Html::endTag('div') . "\n" ;
}
$tag = ArrayHelper::remove($this->options, 'tag', 'nav');
$content .= Html::endTag($tag);
BootstrapPluginAsset::register($this->getView());
return $content;
}
Container options setter for backwards compatibility
| public void setContainerOptions ( array $collapseOptions ) | ||
| $collapseOptions | array | |
public function setContainerOptions(array $collapseOptions): void
{
$this->collapseOptions = $collapseOptions;
}