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: 0pxsm
- min-with: 576pxmd
- min-with: 768pxlg
- min-with: 992pxxl
- min-with: 1200pxxxl
- 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();