MVC Application Ribbon View Setup

This _UIKitRibbon.cshtml view holds the content of the top bar or portion of the total ribbon which includes navigation. This is where the application name title is kept and will need to be changed based on the application. This MVC partial view also links to multiple partial views that contain code snippets of of menus for 9-dot, language, profile, etc ...

Code Example


        <header class="ribbon">

          <nav class="topbar">

            <div>

              <a href="/" class="icon icon-shield"></a>

              <div class="title">UI Kit Style</div>

                        
        </div>

            <div>

              <div>

                <a href="#" class="icon icon-ribbon-applications"></a>

                @await Html.PartialAsync("_UIKit9Dot")

                              
        </div>

              <div>

                <a href="#" class="icon icon-sm icon-ribbon-language"></a>

                @await Html.PartialAsync("_UIKitGlobeMenu")

                          </div>
              <div>

                <a href="#" class="icon icon-sm icon-ribbon-settings"></a>

                @await Html.PartialAsync("_UIKitSettingsMenu")

                              
        </div>

              <div>

                <a href="#" class="icon icon-sm icon-ribbon-help"></a>

                @await Html.PartialAsync("_UIKitHelpMenu")

                              
        </div>

              <div>

                <a href="#" class="icon icon-ribbon-profile"></a>

                @await Html.PartialAsync("_UIKitProfileMenu")

                              
        </div>

              <button class="icon icon-hamburger-white appbar-toggle"></button>

                        
        </div>

                  
        </nav>

          @await Html.PartialAsync("_UIKitNavigation")

        </header>

Tob Ribbon Menus

The ribbon menus are separated in individual MVC partial views. This allows the developer to change a small part of the navigation without touching the code of the whole ribbon. This is also designed in hopes to ease distribution of new ribbon features.

9-Dot Menu Code

This _UIKit9Dot.cshtml MVC partial file contains the 9-Dot structure. This is a static example. In most applications there should be dynamic integration with CSAA. This means there would be some level of application integration to make get the 9-dot data and make it render HTML exactly what is specified in this code.


        <div class="nine-dot">

          <a href="#">

            <div class="icon icon-app-cva-white"></div>

            <div>UPS® Intelligent Analytics</div>

                  
        </a>

          <a href="#">

            <div class="icon icon-app-cvdm-white"></div>

            <div>UPS® Intelligent Data Management</div>

                  
        </a>

          <a href="https://upsspm.ups.com" target="_blank">

            <div class="icon icon-app-pickup-manager-white"></div>

            <div>UPS® Intelligent Pickup Manager</div>

                  
        </a>

          <a href="#">

            <div class="icon icon-app-cvr-white"></div>

            <div>UPS® Intelligent Reverse Logistics</div>

                  
        </a>

          <a href="#">

            <div class="icon icon-app-cvt-white"></div>

            <div>UPS® Intelligent Trailer logistics</div>

                  
        </a>

          <a href="#">

            <div class="icon icon-app-cvs-white"></div>

            <div>UPS® Intelligent Delivery History</div>

                  
        </a>

          <a href="#">

            <div class="icon icon-app-rating-white"></div>

            <div>UPS® Intelligent Rating</div>

          </a>

        </div>

Globe Menu Code

This _UIKitGlobeMenu.cshtml partial view contains the language menu.


        <div>

          <a href="#">English</a>

          <a href="#">French</a>

          <a href="#">Spanish</a>

        </div>

Settings Menu Code

This _UIKitSettingsMenu.cshtml partial view contains the settings menu. This file in this example containes nothing. If there is no HTML DIV tag with anchor links then no drop-down menu is presented for the icon.

Help Menu Code

This _UIKitHelpMenu.cshtml partial view contains the help menu.


        <div>

          <a href="/Environment">Learning Center</a>

          <a href="mailto:psisupport@ups.com">PSI Support</a>

        </div>

Profile Menu Code

This _UIKitProfileMenu.cshtml partial view contains the profile menu.


        <div>

          <a href="/ChangePassword">Change Password</a>

          <a href="/Environment">Environment</a>

          <a href="/LogOff">Log Off</a>

        </div>