Customer Care Navigator

Navigator Component

The primary navigation component for the Customer Care module of Invision occupies the left most area of all content, absolutely positioned under the header component.

Note: The app theme component included here will make this page's theme the 'care' app theme.

HTML

<p>Note: The app theme component included here will make this page's theme the 'care' app theme.</p>
<div style="min-width: 720px; min-height: 720px; display: flex;" ng-controller="careNavigatorExampleController as ctrl">
    <inv-app-theme app-id="ctrl.appId"></inv-app-theme>
    <inv-care-navigator
        nav-items="ctrl.navItems"
        item-selected="ctrl.itemSelected"
        flyout-items="ctrl.flyoutItems"
        flyout-item-selected="ctrl.flyoutItemSelected">
    </inv-care-navigator>
</div>

Customer Care Navigator

Navigator Component

The primary navigation component for the Customer Care module of Invision occupies the left most area of all content, absolutely positioned under the header component.

Navigator with Glyphs in Flyout

The navigation component can optionally display custom glyphs to the left of each item in the flyout menu.

Navigator without Flyout

The navigation component can display in a mode where there are no flyout items to display. In this case, the + icon disappears.