Urban backend theme asset bundle for Yii 2.0 Framework

admin, css, asset, theme, backend, less, extension, yii2, urban


Urban Asset Bundle

Backend UI for Yii2 Framework, based on Urban

This package contains an Asset Bundle for Yii 2.0 Framework which registers the CSS files for the Urban user-interface.


The preferred way to install this extension is through composer.

To install Urban run:

composer require toir427/yii2-urban-asset

Quick Start

Once the extension is installed, you can have a preview by reconfiguring the path mappings of the view component:

For Yii 2 Advanced Application Template or Basic Application Template

'components' => [
    'view' => [
         'theme' => [
             'pathMap' => [
                '@app/views' => '@vendor/toir427/yii2-urban-asset/views'

This asset bundle provides sample files for layout and view (see folder examples/), they are not meant to be customized directly in the vendor/ folder.

Therefore it is recommended to copy the views into your application and adjust them to your needs.


  • Copy files from vendor/toir427/yii2-urban-asset/views (or other theme) to @app/views.
  • Remove the custom view configuration from your application by deleting the path mappings, if you have made them before.
  • Edit your views adhering to html markup vendor/almasaeed2010/urban/pages

Left sidebar menu - Widget Menu

If you need to separate sections of the menu then just add the li.header item to items

    'items' => [
        ['label' => 'Gii', 'icon' => 'file-code-o', 'url' => ['/gii']],
        ['label' => 'Debug', 'icon' => 'dashboard', 'url' => ['/debug']],
        ['label' => 'MAIN NAVIGATION', 'options' => ['class' => 'header']], // here
        // ... a group items
        ['label' => '', 'options' => ['class' => 'header']],
        // ... a group items
        ['label' => '', 'options' => ['class' => 'header']],
        // ... a group items

To add a label for a item:

'items' => [
        'label' => 'Mailbox',
        'icon' => 'envelope-o',
        'url' => ['/mailbox'],
        'template'=>'<a href="{url}">{icon} {label}<span class="pull-right-container"><small class="label pull-right bg-yellow">123</small></span></a>'

By default to icons will be added prefix of Font Awesome

Template for Gii CRUD generator

Tell Gii about our template. The setting is made in the config file:

if (YII_ENV_DEV) {    
    $config['modules']['gii'] = [
        'class' => 'yii\gii\Module',      
        'allowedIPs' => ['', '::1', '192.168.0.*', ''],  
        'generators' => [ //here
            'crud' => [
                'class' => 'yii\gii\generators\crud\Generator',
                'templates' => [
                    'urban' => '@vendor/toir427/yii2-urban-asset/gii/templates/crud/simple',