SideNav Widget SideNav.php

Latest Stable Version Latest Unstable Version Total Downloads Monthly Downloads Daily Downloads
Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

This widget is a collapsible side navigation menu built to seamlessly work with Bootstrap framework. It is built over Bootstrap stacked nav component. This widget class extends the Yii Menu widget. Upto 3 levels of submenus are by default supported by the CSS styles. You can choose to extend it to more levels by customizing the CSS.

Important

This widget can be also installed in isolation outside this bundle if needed. In addition to using via \kartik\widgets namespace, this widget can be also installed from the yii2-widget-sidenav repository and can also be accessed via \kartik\sidenav\SideNav namespace.

You can control the side navigation heading by setting the parameter heading

  • You can set this to false to not display the heading. This is the default.
  • You can provide a plain text or a HTML Formatted string as the heading. This value is not HTML encoded.

View this complete demo that shows a complete usage of the Side Navigation menu with configurable options.

// No Heading
echo SideNav::widget(['items' => $items, 'heading' => false]);
    
// HTML Heading
echo SideNav::widget(['items' => $items, 'heading' => '<i class="glyphicon glyphicon-cog"></i> Operations']);

You can control the type of side navigation content, by setting the type to one of the Bootstrap contextual types:

  • SideNav::TYPE_DEFAULT or 'default'
  • SideNav::TYPE_PRIMARY or 'primary'
  • SideNav::TYPE_INFO or 'info'
  • SideNav::TYPE_SUCCESS or 'success'
  • SideNav::TYPE_DANGER or 'danger'
  • SideNav::TYPE_WARNING or 'warning'

View this complete demo that shows a complete usage of the Side Navigation menu with configurable options.

// Default Type
echo SideNav::widget(['items' => $items, 'type' => SideNav::TYPE_DEFAULT);

// Primary Type
echo SideNav::widget(['items' => $items, 'type' => SideNav::TYPE_PRIMARY);
    

The complete set of side navigation options you can control are very similar to the Yii Menu widget. The additional options you can pass are:
  • headingOptions: array options for the sidenav heading
  • containerOptions: array options for the sidenav container panel
  • indItem: string indicator for a menu sub-item, defaults to: »
  • indMenuOpen: string indicator for a opened sub-menu, defaults to:
  • indMenuClose: string indicator for a closed sub-menu, defaults to:
  • items: the menu items configuration. this is the most important configuration parameter of the lot.
    • label: string, optional, specifies the menu item label. When encodeLabels is true, the label will be HTML-encoded. If the label is not specified, an empty string will be used.
    • icon: string, optional, specifies the glyphicon name to be placed before label.
    • url: string or array, optional, specifies the URL of the menu item. It will be processed by Url::to. When this is set, the actual menu item content will be generated using linkTemplate; otherwise, labelTemplate will be used.
    • visible: boolean, optional, whether this menu item is visible. Defaults to true.
    • items: array, optional, specifies the sub-menu items. Its format is the same as the parent items.
    • active: boolean, optional, whether this menu item is in active state (currently selected). If a menu item is active, its CSS class will be appended with activeCssClass. If this option is not set, the menu item will be set active automatically when the current request is triggered by url. For more details, please refer to isItemActive().
    • template: string, optional, the template used to render the content of this menu item. The token `{url}` will be replaced by the URL associated with this menu item, and the token `{label}` will be replaced by the label of the menu item. If this option is not set, it will default to '#'.
    • options: array, optional, the HTML attributes for each menu item.
  • View this complete demo that shows a complete usage of the Side Navigation menu with configurable options.

    echo SideNav::widget(['items' => $items, 'headingOptions' => ['class'=>'head-style']);