Good navigation in complex Line-of-Business applications is absolutely critical. It shall allow users to jump from one page to another and access features quickly and freely. Cumbersome navigation, unintuitive links and lots of clicks can ruin any application. Ease of use and productivity of users in the first place depend on it. Pip.WebUI.Nav module provides controls for global and local navigation.
Side navigation parts
Side navigation menu
Shows navigation links with optional icons that can be combined into groups
Using
Template:
<pip-nav-menu></pip-nav-menu>
Data models:
classNavMenuLink{
// Name to refer to the item
publicname:string;
// Link visible title
publictitle:string;
// Tooltip text
publictooltipText?:string;
// Icon name from $iconProvider
publicicon?:string;
// Counter badge
publiccount?:number;
// class for badge style
publicbadgeStyle?:string;
// Access function
publicaccess?:(link:NavMenuLink)=>boolean;
// window.location.href
publichref?:string;
// $location.url
publicurl?:string;
// $state.go(state, stateParams)
publicstate?:string;
// Parameters for $state.go(state, stateParams)
publicstateParams?:any;
// parent state or parent state for selection item
publicparentState?:string;
// $rootScope.broadcast(event)
publicevent?:string;
// Click callback
publicclick?:(link:NavMenuLink)=>void;
}
classNavMenuSection{
// Name to refer to the section
publicname:string;
// Section visible title
publictitle?:string;
// Tooltip text
publictooltipText?:string;
// Icon name from $iconProvider
publicicon?:string;
// Links shown in the section
publiclinks:NavMenuLink[];
// Access function
publicaccess?:(section:NavMenuSection)=>boolean;
}
classNavMenuConfig{
sections:NavMenuSection[];
defaultIcon?:string;
}
Example on the image
Side navigation header
May contain information about the user or application
Using
Template:
<pip-nav-header></pip-nav-header>
Data models:
classNavHeaderConfig{
publictitle:string;
publicsubtitle:string;
publicicon?:string;
publicpicture?:string;
}
Example on the image
Application bar parts
Application bar icon
Shows main application icon and processes click on it
Using
Template:
<pip-nav-icon></pip-nav-icon>
Data models:
classNavIconConfig{
icon:string;
action?:()=>void;
}
constDefaultIcon:NavIconConfig={
icon:'menu',
action:()=>{}
}
Example on the image
Application bar breadcrumb
Shows title or several titles that reveals the user’s location in a website or Web application
Using
Template:
<pip-breadcrumb></pip-breadcrumb>
Data model:
classBreadcrumbItem{
title:string=null;
click?:(item:BreadcrumbItem)=>void=null;
subActions?:any[]=null;
}
classBreadcrumbConfig{
searchCriteria?:string;
searchClick?:any;
itemClick?:any;
items?:BreadcrumbItem[];
}
Example on the image
Application bar primary actions
Shows extra icons in application bar and processes click on them
Using
Template:
<pip-primary-actions></pip-primary-actions>
Data model:
classPrimaryAction{
icon:string;
click?:any;
subActions?:PrimarySubAction[];
}
classPrimarySubAction{
title:string;
click?:any;
}
classPrimaryActionsConfig{
actions:PrimaryAction[]
}
Example on the image
Application bar secondary actions
Shows icon and dropdown menu with links
Using
Template:
<pip-secondary-actions></pip-secondary-actions>
Data model:
classSecondaryAction{
title:string;
click?:any;
}
classSecondaryActionsConfig{
openMenuClick?:any;
actions:SecondaryAction[];
}
Example on the image
Services
Nav service
allows to configurate and control the navigation elements: nav header, nav menu, breadcrumb, nav icon, primary and secondary actions, etc.