Navigation View

The navigation view control provides a collapsible navigation menu for top-level navigation in your app.

About

The navigation view control provides a collapsible navigation menu for top-level navigation in your app. This control implements the nav pane, or hamburger menu, pattern and automatically adapts the pane's display mode to different window sizes. To create navigation view component you must define special structure and add role with attribute data-role="navview" to navigation view root.


                    <div data-role="navview">
                        ... valid navigation view structure ...
                    </div>
                

Structure

The navigation view consists two main parts: navigation pane and navigation content. The pane serves to display the menu and content to display main data.


                    <div data-role="navview">
                        <div class="navview-pane">
                        ...
                        </div>

                        <div class="navview-content">
                        ...
                        </div>
                    </div>
                

Navigation pane

The navigation pane serves to display a menu and can consist next elements: pull button, suggest box, separator and menu with menu items.

Pull button

The pull button serves for change size of navigation pane.


                    <div class="navview-pane">
                        <button class="pull-button">
                            <span class="default-icon-menu"></span>
                        </button>
                    </div>
                

Suggest box

The suggest box is intended for displaying input fields, for example, a field for searching and must consist input field and input holder for compact mode.


                    <div class="navview-pane">
                        <div class="suggest-box">
                            <input type="text" data-role="input" data-clear-button="false" data-search-button="true">
                            <button class="holder">
                                <span class="mif-search"></span>
                            </button>
                        </div>
                    </div>
                

Menu

For navigation you can create navigation view menu. To create it use <ul> and list items with anchor.

Menu item

To create menu item use list item with anchor and two internal elements: icon and caption.


                    <li>
                        <a href="#">
                            <span class="icon"><span class="mif-apps"></span></span>
                            <span class="caption">Apps</span>
                            <span class="badges">
                                <span class="badge inline">11</span>
                            </span>
                        </a>
                    </li>
                

Menu header

You can precede each group of menu item with a special header element.


                    <li class="item-header">Office</li>
                

Separator

Between navigation pane elements you can insert separator to divide them. To create separator, add element (example <div>) with class .item-separator.


                    <ul class="navview-menu">
                        <li class="item-header">Main pages</li>

                        <li>
                            <a href="#">
                                <span class="icon"><span class="mif-apps"></span></span>
                                <span class="caption">Apps</span>
                            </a>
                        </li>

                        <li class="item-separator"></li>

                        <li class="item-header">Office</li>

                        <li>
                            <a href="#">
                                <span class="icon"><span class="mif-file-word"></span></span>
                                <span class="caption">Word</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon"><span class="mif-file-excel"></span></span>
                                <span class="caption">Excel</span>
                            </a>
                        </li>
                    </ul>
                

Content area

To display main data you must use element with class .navview-content.


                    <div data-role="navview">
                        <div class="navview-pane">
                            <button class="pull-button">
                                <span class="default-icon-menu"></span>
                            </button>
                        </div>

                        <div class="navview-content d-flex flex-align-center flex-justify-center h-100">
                            ... This is navigation view content area ...
                        </div>
                    </div>
                

Pane display modes

You can define behavior of navigation view pane with attributes data-compact and data-expand. Values for these attributes must be a set of:

  • fs - min-with: 0px
  • sm - min-with: 576px
  • md - min-with: 768px
  • lg - min-with: 992px
  • xl - min-with: 1200px
  • xxl - min-with: 1452px

By default used md for compact and lg for expanded mode.


                    <div data-role="navview" data-expand="lg" data-compact="md">...</div>
                    <div data-role="navview" data-expand="fs" data-compact="false">...</div>
                

Events

When navigation view works, it generated a number of events. You can use callbacks to these events to interact with it.

Events Data-* Desc
onMenuItemClick(elem) data-on-menu-item-click Fired when user click on navviwe menu item
onNavViewCreate(elem) data-on-nav-view-create Fired when navigation view was created

Methods

To interact with component you can use navview methods.

Method Desc
open() Use this method to open navigation view pane
close() Use this method to close navigation view pane
toggle() Use this method to toggle open/close navigation view pane

                    var nv = $("#navview1").data("navview");
                    nv.open();
                    nv.close();