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 Navigation

Example: Left Nav

Code

HTML

<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>
        

Documentation

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.