Yii2 NavBar组件添加自定义div：修改HTML结构需求

Got it, let's figure out how to add that custom side_item div with your login-related HTML inside the Yii2 NavBar's .container. I've got two straightforward approaches for you, depending on whether you need a quick one-off fix or a reusable solution:

Approach 1: Quick Inline Fix (For Single Use) #

If you only need this custom div on one page, you can directly inject it into the NavBar's container by leveraging the widget's begin()/end() workflow. Any content you output between NavBar::begin() and NavBar::end() gets placed inside the .container element.

Here's how to do it:

<?php
use yii\bootstrap\NavBar;

NavBar::begin([
    'options' => [
        'id' => 'w1',
        'class' => 'navbar navbar-default',
    ],
]);

// Add your custom side_item div here with all login HTML
echo '<div class="side_item">';
// Paste your full login-related HTML code inside this div
echo '<div class="login-container">
    <form class="login-form" action="/site/login" method="post">
        <input type="email" name="LoginForm[email]" placeholder="邮箱">
        <input type="password" name="LoginForm[password]" placeholder="密码">
        <button type="submit">登录</button>
        <a href="/site/forgot-password">忘记密码?</a>
    </form>
</div>';
echo '</div>';

// Render the default NavBar content (navbar-header + collapse menu)
echo NavBar::widget()->renderContent();

NavBar::end();
?>

This will generate exactly the HTML structure you want, with your side_item nested inside the .container alongside the default NavBar elements.

Approach 2: Custom NavBar Component (For Reuse) #

If you need this side_item across multiple pages, creating a reusable custom NavBar component is the cleaner way. We'll extend Yii2's built-in NavBar widget and override its content-rendering method.

Step 1: Create the Custom Component #

Make a new file CustomNavBar.php in your app/components directory:

namespace app\components;

use yii\bootstrap\NavBar;

class CustomNavBar extends NavBar
{
    // Define a property to hold your side item content (flexible for different pages)
    public $sideItemContent = '';

    protected function renderContent()
    {
        // Get the default NavBar content (navbar-header + collapse menu)
        $defaultContent = parent::renderContent();
        
        // Build your custom side item div
        $sideItem = '<div class="side_item">' . $this->sideItemContent . '</div>';
        
        // Combine and return the content (adjust order to place side_item where you want)
        // Use this if you want side_item BEFORE the default content:
        return $sideItem . $defaultContent;
        
        // Use this instead if you want side_item AFTER the default content:
        // return $defaultContent . $sideItem;
    }
}

Step 2: Use the Custom Component in Views #

Now you can call your custom NavBar anywhere in your views, passing in the login HTML via the sideItemContent property:

<?php
use app\components\CustomNavBar;
use yii\bootstrap\Nav;

CustomNavBar::begin([
    'options' => [
        'id' => 'w1',
        'class' => 'navbar navbar-default',
    ],
    'sideItemContent' => '<div class="login-widget">
        <a href="/site/login" class="login-btn">登录</a>
        <a href="/site/signup" class="signup-btn">注册</a>
        <!-- Add all your login-related HTML here -->
    </div>',
]);

// Add your main navigation menu as usual
echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-right'],
    'items' => [
        ['label' => '首页', 'url' => ['/site/index']],
        ['label' => '关于', 'url' => ['/site/about']],
    ],
]);

CustomNavBar::end();
?>

Resulting HTML Structure #

Either approach will output HTML that matches your requirement:

<nav id="w1" class="navbar navbar-default">
    <div class="container">
        <div class="side_item">...</div> <!-- Your custom login HTML -->
        <div class="navbar-header">...</div>
        <div id="w1-collapse" class="collapse navbar-collapse">
            <ul>...</ul>
        </div>
    </div>
</nav>

内容的提问来源于stack exchange，提问作者Max Smirnov