Primary Side Navigator

Expanded Navigation

The primary navigation component of all Invision applications occupies the left most area of all content, absolutely positioned under the header component. The navigator is organized into high level categories, each of which must provide a custom icon to represent that section in both the expanded and collapsed state.

Purchase Activity

Transaction Activity

Contact Event Type

Address Validation

Subscription Settings

Contact Method

Notification Settings

General

List

Custom Category

List Type

Order

Viewing Activity

GL Activity

Active Subscriptions

Interactions

HTML

<div style="min-width: 720px; min-height: 720px; position: relative;">
    <div class="t-navigator c-navigator is-collapsible">
        <div class="c-navigatorItem">
            <div class="c-navigatorItem-faceplate">
                <inv-icon class="c-navigatorItem-icon" glyph="'usd'"></inv-icon>
                <div class="c-navigatorItem-text">Purchase Activity</div>
            </div>
        </div>
        <div class="c-navigatorItem is-active is-expanded">
            <div class="c-navigatorItem-faceplate">
                <inv-icon class="c-navigatorItem-icon" glyph="'tags'"></inv-icon>
                <div class="c-navigatorItem-text">Transaction Activity</div>
            </div>
            <div class="c-navigatorItem-subNav">
                <div class="c-navigatorItem c-navigatorItem--subNav">
                    <div class="c-navigatorItem-faceplate">
                        <div class="c-navigatorItem-text">Contact Event Type</div>
                    </div>
                </div>
                <div class="c-navigatorItem c-navigatorItem--subNav">
                    <div class="c-navigatorItem-faceplate">
                        <div class="c-navigatorItem-text">Address Validation</div>
                    </div>
                </div>
                <div class="c-navigatorItem c-navigatorItem--subNav">
                    <div class="c-navigatorItem-faceplate">
                        <div class="c-navigatorItem-text">Subscription Settings</div>
                    </div>
                </div>
                <div class="c-navigatorItem c-navigatorItem--subNav">
                    <div class="c-navigatorItem-faceplate">
                        <div class="c-navigatorItem-text">Contact Method</div>
                    </div>
                </div>
                <div class="c-navigatorItem c-navigatorItem--subNav">
                    <div class="c-navigatorItem-faceplate">
                        <inv-icon class="c-navigatorItem-toggle" glyph="'caret-down'"></inv-icon>
                        <div class="c-navigatorItem-text">Notification Settings</div>
                    </div>
                    <div class="c-navigatorItem-subNav">
                        <div class="c-navigatorItem-faceplate">
                            <div class="c-navigatorItem-text">General</div>
                        </div>
                        <div class="c-navigatorItem-faceplate">
                            <div class="c-navigatorItem-text">List</div>
                        </div>
                        <div class="c-navigatorItem-faceplate">
                            <div class="c-navigatorItem-text">Custom Category</div>
                        </div>
                    </div>
                </div>
                <div class="c-navigatorItem c-navigatorItem--subNav">
                    <div class="c-navigatorItem-faceplate">
                        <div class="c-navigatorItem-text">List Type</div>
                    </div>
                </div>
                <div class="c-navigatorItem c-navigatorItem--subNav">
                    <div class="c-navigatorItem-faceplate">
                        <inv-icon class="c-navigatorItem-toggle" glyph="'caret-right'"></inv-icon>
                        <div class="c-navigatorItem-text">Order</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-navigatorItem">
            <div class="c-navigatorItem-faceplate">
                <inv-icon class="c-navigatorItem-icon" glyph="'eye'"></inv-icon>
                <div class="c-navigatorItem-text">Viewing Activity</div>
            </div>
        </div>
        <div class="c-navigatorItem">
            <div class="c-navigatorItem-faceplate">
                <inv-icon class="c-navigatorItem-icon" glyph="'cubes'"></inv-icon>
                <div class="c-navigatorItem-text">GL Activity</div>
            </div>
        </div>
        <div class="c-navigatorItem">
            <div class="c-navigatorItem-faceplate">
                <inv-icon class="c-navigatorItem-icon" glyph="'users'"></inv-icon>
                <div class="c-navigatorItem-text">Active Subscriptions</div>
            </div>
        </div>
        <div class="c-navigatorItem">
            <div class="c-navigatorItem-faceplate">
                <inv-icon class="c-navigatorItem-icon" glyph="'exchange'"></inv-icon>
                <div class="c-navigatorItem-text">Interactions</div>
            </div>
        </div>
        <div class="c-navigatorItem c-navigatorItem--expander">
            <div class="c-navigatorItem-faceplate">
                <div class="c-icon fa fa-outdent"></div>
            </div>
        </div>
    </div>
</div>

Collapsed Navigation

The primary navigation component supports both an expanded and collapsed state to preserve screen real-estate. When in a collapsed state, all labels for any items are removed, and only the icons present themselves.