Standard Navigator Component

Navigator Component

The standard navigation component of Invision, occupies the left most area of all content, absolutely positioned under the header component. This re-usable component implements the Navigator swatch and component, and provides a mechanism to specify the navigation items via configurable parameters. It can also include action items that initiate some process, but do not change the active view.

HTML

<div style="min-width: 720px; min-height: 720px; display: flex;" ng-controller="navigatorExampleController">
    <inv-navigator
        inv-navigator-items="navItems"
        inv-navigator-is-collapsible="isCollapsible"
        inv-navigator-is-collapsed="isCollapsed"
        inv-navigator-toggle-collapse="toggleCollapse()"
        inv-navigator-app-id="appId"
        inv-navigator-category-selected="categorySelected(navItem)"
        inv-navigator-item-selected="itemSelected(navItem)"
        inv-navigator-action-selected="actionSelected(actionItem)">
    </inv-navigator>
</div>

Collapsed Navigator Component

The navigator can be presented in a collapsed state with the menus inside of a series of flyout style popups.

HTML

<div style="min-width: 720px; min-height: 720px; position: relative;" ng-controller="navigatorExampleController">
    <inv-navigator
        inv-navigator-items="navItems"
        inv-navigator-is-collapsible="isCollapsible"
        inv-navigator-is-collapsed="isCollapsed2"
        inv-navigator-toggle-collapse="toggleCollapse2()"
        inv-navigator-app-id="appId"
        inv-navigator-category-selected="categorySelected(navItem)"
        inv-navigator-item-selected="itemSelected(navItem)"
        inv-navigator-action-selected="actionSelected(actionItem)"></inv-navigator>
</div>

Navigator application theming

Navigator link states, and other related ui states, are all themed to the specific app in use.

HTML

<div style="min-width: 720px; min-height: 720px; position: relative;" ng-controller="navigatorExampleController">
    <inv-navigator
        inv-navigator-items="navItems"
        inv-navigator-is-collapsible="isCollapsible"
        inv-navigator-is-collapsed="isCollapsed"
        inv-navigator-toggle-collapse="toggleCollapse"
        inv-navigator-app-id="otherAppId"></inv-navigator>
</div>

Non-Collapsible Navigator

The primary navigation component allows the user to specify whether the component support a collapsed state. When set to false, the component will no longer give the option for the user to toggle its expansion state.

HTML

<div style="min-width: 720px; min-height: 720px; display: flex;" ng-controller="navigatorExampleController">
    <inv-navigator inv-navigator-items="navItems"
        inv-navigator-is-collapsible="notCollapsible"
        inv-navigator-app-id="appId"></inv-navigator>
</div>

Handling overflow

There are times when the primary navigation component does not have enough vertical space to support all of the navigation items it is being asked to render. This is typically only the case in its expanded state, when sub items may have sub items within them, many of which may be in an expanded state at a time. In these instances, a scroll bar will appear in the navigator.

HTML

<div style="min-width: 720px; max-height: 450px; display: flex;" ng-controller="navigatorExampleController">
    <inv-navigator inv-navigator-items="navItems"
        inv-navigator-is-collapsed="isCollapsed"
        inv-navigator-toggle-collapse="toggleCollapse"
        inv-navigator-app-id="appId"></inv-navigator>
</div>

Searchable Navigator

Same as the standard navigator component but with search feature enabled.

HTML

<div style="min-width: 720px; min-height: 720px; display: flex;" ng-controller="navigatorExampleController">
    <inv-navigator
        inv-navigator-items="navItems"
        inv-navigator-is-collapsible="isCollapsible"
        inv-navigator-is-collapsed="isCollapsed"
        inv-navigator-toggle-collapse="toggleCollapse()"
        inv-navigator-app-id="appId"
        inv-navigator-category-selected="categorySelected(navItem)"
        inv-navigator-item-selected="itemSelected(navItem)"
        inv-navigator-action-selected="actionSelected(actionItem)"
        inv-navigator-searchable="true">
    </inv-navigator>
</div>