There are several components available for navigation within Audi applications. The appropriate type of navigation can be selected according to the specific application. Navigation components can be combined with an application to cover multiple levels. All in all, the navigation should be designed to be as simple as possible for the user.
The size of the navigation components depends on the basic type size used, which can adapt to the viewport width in question. As such, it is flexible in size. They are available in a dark and a light version.

Navigation Bar

The navigation bar is preferably used to display the primary navigation. It can also be used to display the secondary navigation. Depending on the application, it is possible to choose whether the navigation is fixed at the upper edge of the viewport initially or after interaction by the user.

On the navigation bar, the active navigation item is highlighted by means of underlining and strong contrast. The typeface used is Audi Type Extended Normal. In the case of a smaller hierarchy and viewport width, it is also possible to use Audi Type Screen Normal and adapt the type size. Icons can be used in addition to the text links.

On small viewports, the display is changed to a dropdown. The breakpoint can be selected to suit the specific application.

HTML
<nav class="aui-nav aui-js-nav aui-nav--bar aui-nav--inline">
  <div class="aui-nav__panel">
    <ul class="aui-nav__items">
      <li class="aui-nav__item"><button class="aui-nav__action" type="button"><span>Button echo</span></button></li>
      <li class="aui-nav__item"><a class="aui-nav__action is-active" href="#">Link alpha</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link bravo</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link charlie</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link delte</a></li>
      <li class="aui-nav__item"><button class="aui-nav__action is-disabled" type="button" disabled>Disabled</button></li>
    </ul>
  </div>
</nav>

Tab Navigation

Tab navigation is preferably used to display the secondary navigation. It can also be used to display the primary navigation. Depending on the application, it is possible to choose whether the navigation is fixed at the upper edge of the viewport initially or after interaction by the user.

With tab navigation, the active navigation item is highlighted by means of a rectangular block in the background colour of the content section. The typeface used is Audi Type Extended Normal. In the case of a smaller hierarchy and viewport width, it is also possible to use Audi Type Screen Normal and adapt the type size. Icons can be used in addition to the text links.

On small viewports, the display is changed to a dropdown. The breakpoint can be selected to suit the specific application.

HTML
<nav class="aui-nav aui-js-nav aui-nav--pills">
  <div class="aui-nav__panel">
    <ul class="aui-nav__items">
      <li class="aui-nav__item"><a class="aui-nav__action is-active" href="#">Link alpha</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link bravo</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link charlie</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link delta</a></li>
      <li class="aui-nav__item"><button class="aui-nav__action" type="button">Button echo</button></li>
      <li class="aui-nav__item"><button class="aui-nav__action is-disabled" type="button" disabled>Disabled</button></li>
    </ul>
  </div>
</nav>

Tabs and Navigation Bar

The two navigation patterns can be combined so as to depict two navigation levels.

Content area
HTML
<nav class="aui-nav aui-js-nav aui-nav--pills">
  <div class="aui-nav__panel">
    <ul class="aui-nav__items">
      <li class="aui-nav__item"><a class="aui-nav__action is-active" href="#">Link alpha</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link bravo</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link charlie</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link delta</a></li>
      <li class="aui-nav__item"><button class="aui-nav__action" type="button">Button echo</button></li>
      <li class="aui-nav__item"><button class="aui-nav__action is-disabled" type="button" disabled>Disabled</button></li>
    </ul>
  </div>
</nav>
<div class="leader-padding-10 trailer-padding-10 aui-color-gray90">
  Content area
</div>
Content area
HTML
<nav class="aui-nav aui-js-nav aui-nav--small aui-nav--pills">
  <div class="aui-nav__panel">
    <ul class="aui-nav__items">
      <li class="aui-nav__item"><a class="aui-nav__action is-active" href="#">Link alpha</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link bravo</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link charlie</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link delta</a></li>
      <li class="aui-nav__item"><button class="aui-nav__action" type="button">Button echo</button></li>
      <li class="aui-nav__item"><button class="aui-nav__action is-disabled" type="button" disabled>Disabled</button></li>
    </ul>
  </div>
  <div class="aui-nav__paddles"><button type="button" class="aui-nav__paddle-left" disabled=""></button><button type="button" class="aui-nav__paddle-right" disabled=""></button></div>
</nav>

Sidebar Navigation

Sidebar navigation is used for the primary navigation and can depict simple and also deeper hierarchies. If necessary, icons are used in addition to the text links.

Whether the navigation is directly visible or has to be accessed as an off-canvas menu by means of an action is something that can be decided depending on the application.

As an off-canvas menu it can be placed on the left or right inside the viewport and varied in size according to preference. With small viewports such as in the case of a mobile application, the menu occupies the entire screen.

List Navigation

List navigation shows a vertical list of navigation items and is mainly used as a navigation aid in the content area. The navigation items are separated from each other by a fine line.

The type weight and size can be varied – depending on hierarchy and viewport width. If necessary, icons are used in addition to the text links.

HTML
<nav class="aui-nav aui-js-nav aui-nav--list">
  <ul class="aui-nav__items">
    <li class="aui-nav__item"><a href="#" class="aui-nav__action is-active">Action (active at first)</a></li>
    <li class="aui-nav__item"><a href="#" class="aui-nav__action">Action</a></li>
    <li class="aui-nav__item"><a href="#" class="aui-nav__action">Link</a></li>
    <li class="aui-nav__item"><button class="aui-nav__action" type="button">Button</button></li>
    <li class="aui-nav__item"><button class="aui-nav__action is-disabled" type="button" disabled>Disabled</button></li>
  </ul>
</nav>

Tab Bar

The tab bar is a special form of the navigation bar which is used for all native applications (both iOS and Android). It preferably appears at the bottom edge of the viewport. In the case of tablet applications in landscape format, it can also be positioned at the left-hand edge. The navigation items are shown as icons or as a combination of icon and label in Audi Type Screen Normal. The active navigation item is highlighted by means of a line at the bottom edge of the tab bar. The background of the tab bar is preferably white or black.

Flyover

The flyover serves as a fast access device for sections of a long content page and is accessed by means of an icon. Links are used within the flyer, and these can be combined with icons.

HTML
<div class="aui-flyout aui-js-flyout">
  <button class="aui-flyout__toggle aui-button aui-js-response aui-button--icon aui-button--icon--large aui-button--round audiicon--large">
    <svg class="audiicon audiicon-large">
      <use xlink:href="#audiicon-system-download-large"></use>
    </svg>
  </button>
  <div class="aui-flyout__panel">
    <div class="aui-flyout__panel-content">
      <nav class="aui-nav aui-js-nav aui-nav--list">
        <ul class="aui-nav__items">
          <li class="aui-nav__item"><a class="aui-nav__action is-active" href="#">Action (active at first)</a></li>
          <li class="aui-nav__item"><a class="aui-nav__action" href="#">Action</a></li>
          <li class="aui-nav__item"><a class="aui-nav__action" href="#">Link</a></li>
          <li class="aui-nav__item"><button class="aui-nav__action" type="button">Button</button></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Breadcrumb

Breadcrumb navigation can be used on pages with multiple navigation levels. In large viewports, all levels of a navigation path are shown, in small viewports only the current page and section of the path.

HTML
<nav class="aui-breadcrumb aui-js-breadcrumb" aria-label="Breadcrumbs" role="navigation">
  <ol class="aui-breadcrumb__items">
    <li class="aui-breadcrumb__item"><a class="aui-breadcrumb__action" href="#">Audi</a></li>
    <li class="aui-breadcrumb__item"><a class="aui-breadcrumb__action" href="#">Kundenbereich</a></li>
    <li class="aui-breadcrumb__item"><a class="aui-breadcrumb__action" href="#">Reparatur und Service</a></li>
    <li class="aui-breadcrumb__item"><a class="aui-breadcrumb__action" href="#">Audi Original Teile</a></li>
    <li class="aui-breadcrumb__item">Audi Original Staub- und Pollenfilter</li>
  </ol>
</nav>
Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Dos & Don’ts

The primary navigation of a website should preferably appear against an image. In order to achieve better readability, n use is made of lower contrast of the inactive items here.
Don’t place the navigation bar against a red background.
Don’t place the tab navigation against a red background.
Don’t place the navigation list against a red background.
Don’t place the breadcrumb against a red background.