We're using cookies, but you can turn them off in Privacy Settings. If you use the site without changing settings, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

App Navigations

Left Nav

Standalone Cards

This is a content area next to a left nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a content area next to a left nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML

<div class="col-md-4 col-lg-3 col-lg-offset-1">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">App Section One</a></li>
        <li><a href="#">App Section Two</a></li>
        <li><a href="#">App Section Three</a></li>
        <li><a href="#">App Section Four</a></li>
        <li><a href="#">App Section Five</a></li>
    </ul>
</div>
            

Problem Being Solved

Apps may contain subsections of similar content.

When to Use

This navigation should be used to group similar content / forms within an app. This makes it easier for a user to discover how to accomplish a specific task (e.g., changing their address within the Profile app).

When Not to Use

This pattern should not be used on the enterprise site. It is intended for the standalone Azure apps only.

Formatting

Left nav uses Bootstrap pill classes.

Right Nav

App Title

Page Title

Standalone Cards

This is a content area next to a right nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a content area next to a right nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML

<div class="col-md-4 col-lg-3 col-sm-4 col-lg-push-8 col-md-push-8 col-sm-push-8">
   <div id="nav-toggle" data-toggle="collapse" data-target="#pills" class="nav nav-pills nav-stacked nav-toggle">
       <span class="sr-only">Toggle navigation</span>
       <b>Step x of xx</b>
   </div>
   <ul id="pills" class="nav nav-pills nav-stacked right-nav-pills">
       <li><a href="#"><i class="icon pe-7s-check pe-va complete"></i><span>Link 1</span></a></li>
       <li aria-label="Link 2 Selected" class="active"><a href="#"><i class="icon pe-7s-check pe-va"></i><span>Link 2</span></a></li>
       <li><a href="#"><i class="icon pe-7s-check pe-va"></i><span>Link 3</span></a></li>
   </ul>
</div>
                    

Problem Being Solved

A pattern is needed for progress tracking in registration.

When Not to Use

This pattern should not be used on the enterprise site. It is intended for the standalone Azure apps only.

Formatting

Right nav uses Bootstrap pill classes.