Yii2中能否使用Bootstrap4默认NavBar控件制作侧边栏

完全可以基于Yii2封装的Bootstrap4默认NavBar组件搭建功能完整的可用侧边栏，不需要从零编写自定义侧边栏组件逻辑，能大幅压缩基础布局的开发耗时。 #

核心实现思路 #

所有操作都是通过NavBar组件的原生配置项完成，不需要修改组件源码、不需要重写渲染逻辑：

• 前置依赖：确认项目已安装官方yiisoft/yii2-bootstrap4扩展，该扩展1:1对齐Bootstrap4的原生组件能力，没有对NavBar的可用配置做裁剪。
• 布局调整：通过给NavBar的options配置传入Bootstrap4原生布局类，直接把默认横向顶部导航改成纵向侧边固定栏，所有样式类都是Bootstrap4内置的，不需要额外写自定义CSS实现侧边布局逻辑，常用类包括fixed-left实现固定定位、flex-column切换为纵向弹性布局、vh-100让侧边栏占满视口高度。
• 菜单渲染：完全沿用NavBar配套的Nav控件做菜单渲染，菜单项的配置、路由自动激活判断、下拉子菜单展开逻辑都是NavBar默认自带的，和做顶部导航的写法没有任何区别。
• 交互适配：侧边栏的折叠收展逻辑直接复用NavBar自带的toggle按钮能力，不需要额外写JS交互代码，自然支持移动端的收起/展开行为。

可直接复用的配置示例 #

直接粘贴到布局文件的对应位置即可运行，不需要改动组件源码：

use yii\bootstrap4\NavBar;
use yii\bootstrap4\Nav;

NavBar::begin([
    'brandLabel' => '系统名称',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        // 组合Bootstrap4原生类实现侧边栏布局
        'class' => 'navbar-dark bg-dark fixed-left flex-column align-items-start vh-100 p-3',
    ],
    'collapseOptions' => [
        'class' => 'flex-column w-100',
    ],
]);

// 菜单配置和顶部导航完全一致
echo Nav::widget([
    'options' => ['class' => 'nav-pills flex-column w-100'],
    'items' => [
        ['label' => '仪表盘', 'url' => ['/dashboard/index']],
        ['label' => '内容管理', 'url' => ['/post/index']],
        ['label' => '用户管理', 'url' => ['/user/index']],
    ],
]);

NavBar::end();

收尾适配说明 #

只需要给页面主内容容器加一个简单的左外边距样式，把主内容区和侧边栏做视觉分离即可，这部分只需要一行简单CSS，完全不需要改动侧边栏组件本身。
这种实现方式生成的侧边栏，天然继承Bootstrap4 NavBar的所有默认能力：路由匹配的激活态标识、下拉菜单的交互逻辑、无障碍访问属性，不需要额外补写重复的基础功能代码。

内容的提问来源于stack exchange，提问作者Kaloyan Nikolov