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

• User's guide
• Online samples
• API reference
• Developer's guide
• Changelog
• Pip.WebUI project website
• Pip.WebUI project wiki
• Pip.WebUI discussion forum
• Pip.WebUI team blog

Module dependencies

• pip-webui-lib: angular, angular material and other 3rd party libraries
• pip-webui-css: CSS styles and web components
• pip-webui-services: localization and other core services

License

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