pip-webui-nav

2.1.0 • Public • Published

Pip.WebUI Logo
Navigation controls

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 panel

Navigation Sidenav provided by this module is defined by configuration and does not require HTML markup. It shows navigation links with optional icons that can be combined into groups. The top of the Sidenav may contain information about the user or application.

pipSideNavProvider.sections = [
            {
                title: 'Appbar',
                icon: 'icons:goal',
                links: [
                    { title: 'Nav icons', icon: 'icons:archive', url: '/nav_icons' },
                    { title: 'Titles', icon: 'icons:list', url: '/titles' },
                    { title: 'Actions', icon: 'icons:action', url: '/actions' },
                    { title: 'Search', icon: 'icons:search', url: '/search' },
                    { title: 'Shadows', icon: 'icons:lamp', url: '/shadows' },
 
                    { title: 'Tabs', icon: 'icons:folder', url: '/tabs' },
                    { title: 'Dropdown', icon: 'icons:list', url: '/dropdown' },
                ]
            },
            {
                title: 'SideNav',
                icon: 'icons:area',
                links: [
                    { title: 'StickySideNav', icon: 'icons:submenu', url: '/sticky_sidenav' },
                    { title: 'Navigations', icon: 'icons:preview', url: '/navigations' }
                ]
            }
        ];

Sidenav have to representation: popup-sidenav and sticky-sidenav. A popup-sidenav can be opened and closed programatically. By default, upon opening it will slide out on left of the main content area. A sticky-sidenav have some state which depend on the size of the browser window. Please see pipMedia breakpoints...

Breakpoint sticky-sidenav state
xs, sm popup-sidenav
md icon-sidenav
lg resized-sidenav
xl full-sidenav

popup-sidenav

icon-sidenav

resized-sidenav

full-sidenav

Application bar

Appbar similar to Sidenav has a complex structure that if defined by configuration. It contains menu icon, title that can be turned into breadcrumb, primary actions on the bar, secondary actions hidden in popup menu and search.

menu icon

title

breadcrumb

primary actions

secondary actions

search

Navigation tabs

Navigation tabs are similar to regular tabs. But they contain links and turn into Navigation dropdown on smaller screens.

Navigation dropdown

Navigation dropdown control is places at the top of the page, properly styled and contains navigation links

Learn more about the module

Module dependencies

License

This module is released under MIT license and totally free for commercial and non-commercial use.

Package Sidebar

Install

npm i pip-webui-nav

Weekly Downloads

27

Version

2.1.0

License

MIT

Last publish

Collaborators

  • seroukhov
  • zontak