Affix Widget Affix.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 offers scrollspy and affixed enhanced navigation (upto 2-levels) to highlight sections and secondary sections in each page. This widget class extends the Yii Menu widget. The affix widget can be used to generate both the:

  • Sidebar Menu: Displays the scrollspy/affix navigation menu as a sidebar
  • and/or
  • Main Body: Displays the main body sections based on the section & subsection headings and content passed.
The parameters to pass are:
  • type: The affix content type. Must be either menu or body. Defaults to menu.
  • items: The affix content items as an array.

Note

If you have the header section fixed to the top, you must add a CSS class kv-header to the header container. Similarly, for a fixed footer you must add the class kv-footer to your footer container. This will ensure a correct positioning of the affix navigation widget on the page.

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-affix repository and can also be accessed via \kartik\affix\Affix namespace.

Displays the affix sidebar menu just like the one aside based on items configured. You must pass the following parameters to the items array. You can refer the Yii Menu widget for understanding other parameters to customize your affix menu.

  • label string, mandatory, specifies the menu item label. When [[encodeLabels]] is true, the label will be HTML-encoded.
  • icon string, optional, specifies the glyphicon name to be placed before label.
  • url string, mandatory, specifies the URL of the menu item. This will be a bookmark on the same page. For example #section-1 or #section-1-1.
  • items array, optional, specifies the sub-menu items. Its format is the same as the parent items. Note only two levels are supported for display by this widget.
  • options array, optional, the HTML attributes for the menu container tag.

View this complete demo that shows a combined usage of the affix menu and the affix body.

$items = [
[
    'url' => '#section-1',
    'label' => 'Section 1',
    'icon' => 'circle-arrow-right',
    'items' => [
         ['url' => '#section-1-1', 'label' => 'Section 1.1', 'icon' => 'arrow-right'],
         ['url' => '#section-1-2', 'label' => 'Section 1.2', 'icon' => 'arrow-right'],
         ['url' => '#section-1-3', 'label' => 'Section 1.3', 'icon' => 'arrow-right'],
         ['url' => '#section-1-4', 'label' => 'Section 1.4', 'icon' => 'arrow-right'],
         ['url' => '#section-1-5', 'label' => 'Section 1.5', 'icon' => 'arrow-right'],
    ],
]
];
echo Affix::widget(['items' => $items]);

Displays the affix main body sections and subsections just like the one you are reading, based on items configured. You should typically pass the following parameters for displaying the affix body.

  • secTemplate string, the main body section template. The variables {id}, {header}, {content}, and {subSection} in the template will be autopopulated. The default secTemplate is:
  • <div class="kv-section">
        <div class="page-header">
            <h1 id="{id}">{header}</h1>
        </div>
        {content}{subSection}
    </div>    
    
  • subTemplate string, the sub section template within each main section. The variables {id}, {header} and {content} in the template will be autopopulated. The default subTemplate is:
  • <div class="kv-sub-section">
        <h3 id="{id}">{header}</h3>
        {content}
    </div>
    
  • items array, with these important parameters:
    • url string, mandatory, specifies the URL of the menu item. This will be a bookmark on the same page. For example #section-1 or #section-1-1.
    • header string, optional, the header for the body content to be rendered in the main page using Affix::body. If not set, this will be defaulted to the label.
    • subheader string, optional, the subheader that will be printed within the header.
    • content string, the body content to be rendered in the main page using renderBody.

View this complete demo that shows a combined usage of the affix menu and the affix body.

$items = [
[
    'url' => '#section-1',
    'header' => 'Section 1',
    'subheader' => 'Subheader 1',
    'content' => $content,
    'items' => [
         ['url' => '#section-1-1', 'header' => 'Section 1.1', 'content' => $content],
         ['url' => '#section-1-2', 'header' => 'Section 1.2', 'content' =>$content],
         ['url' => '#section-1-3', 'header' => 'Section 1.3', 'content' => $content],
         ['url' => '#section-1-4', 'header' => 'Section 1.4', 'content' => $content],
         ['url' => '#section-1-5', 'header' => 'Section 1.5', 'content' => $content],
    ],
]
];
echo Affix::widget(['items' => $items, 'type' => 'body']);

Displaying both the sidebar menu and body together will require just one items array to be generated. The Affix widget can then be called with type = menu or body like in the example below

View this complete demo that shows a combined usage of the affix menu and the affix body.

<?php
/* Initializing the items */
$icon = 'arrow-right';
$items = [
[
    'url' => '#sec-1',
    'label' => 'Section 1',
    'icon' => 'circle-arrow-right',
    'content' => $content,
    'items' => [
         ['url' => '#sec-1-1', 'label' => 'Section 1.1', 'icon' => $icon, 'content' => $content],
         ['url' => '#sec-1-2', 'label' => 'Section 1.2', 'icon' => $icon, 'content' => $content],
         ['url' => '#sec-1-3', 'label' => 'Section 1.3', 'icon' => $icon, 'content' => $content],
         ['url' => '#sec-1-4', 'label' => 'Section 1.4', 'icon' => $icon, 'content' => $content],
         ['url' => '#sec-1-5', 'label' => 'Section 1.5', 'icon' => $icon, 'content' => $content],
    ],
]
];

/* Display both menu and body aside each other */
?>
<div class="row">
    <div class="col-sm-3">
        <?php
        echo Affix::widget([
            'type' => 'menu',
            'items' => $items
        ]);?>
    </div>
    <div class="col-sm-9">
        <?php
        echo Affix::widget([
            'type' => 'body',
            'items' => $items
        ]);?>
    </div>
</div>