Für die Navigation innerhalb von Audi Anwendungen stehen mehrere Komponenten zur Verfügung. Die passende Form der Navigation kann anwendungsspezifisch gewählt werden. Navigations-Komponenten können innerhalb einer Anwendung kombiniert werden, um mehrere Ebenen abzubilden. Insgesamt sollte die Navigation für den Nutzer so einfach wie möglich gestaltet sein.

Die Größe der Navigations-Komponenten ist abhängig von der jeweils verwendeten Basisschriftgröße gestaltet, die sich der jeweiligen Viewportbreite anpassen kann. Dementsprechend ist ihre Größe flexibel. Sie stehen in dunkler und heller Version zur Verfügung.

Navigation Bar

Die Navigation Bar wird bevorzugt zur Darstellung von Primärnavigation eingesetzt. Eine Darstellung von Sekundärnavigation ist ebenso möglich. Je nach Anwendung kann entschieden werden, ob sie initial oder nach Interaktion durch den Nutzer am oberen Rand des Viewports fixiert wird.

Bei der Navigation Bar wird der aktive Navigationspunkt mit einer Unterstreichung und durch hohen Kontrast hervorgehoben. Verwendete Schrift ist die Audi Type Extended Normal. Bei kleinerer Hierarchie und Viewportbreite kann die Audi Type Screen Normal eingesetzt sowie die Schriftgröße angepasst werden. Zusätzlich zu den Textlinks können Icons eingesetzt werden.

Auf kleinen Viewports wird die Darstellung zu einem Dropdown geändert. Der Breakpoint kann anwendungsspezifisch gewählt werden.

HTML
<nav class="aui-nav aui-js-nav aui-nav--bar aui-nav--inline aui-theme-gray95">
  <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="#0">Link alpha</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#0">Link bravo</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#0">Link charlie</a></li>
      <li class="aui-nav__item"><a class="aui-nav__action" href="#0">Link delta</a></li>
      <li class="aui-nav__item"><button class="aui-nav__action is-disabled" type="button" disabled>Disabled</button></li>
    </ul>
  </div>
</nav>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
</style>

Tab navigation

Die Tab Navigation wird bevorzugt zur Darstellung von Sekundärnavigation eingesetzt. Eine Darstellung von Primärnavigation ist ebenso möglich. Je nach Anwendung kann entschieden werden, ob sie initial oder nach Interaktion durch den Nutzer am oberen Rand des Viewports fixiert wird.

Bei der Tab Navigation wird der aktive Navigationspunkt durch eine rechteckige Fläche in Hintergrundfarbe des Inhaltsabschnitts hervorgehoben. Verwendete Schrift ist die Audi Type Extended Normal. Bei kleinerer Hierarchie und Viewportbreite kann die Audi Type Screen Normal eingesetzt sowie die Schriftgröße angepasst werden. Zusätzlich zu den Textlinks können Icons eingesetzt werden.

Auf kleinen Viewports wird die Darstellung zu einem Dropdown geändert. Der Breakpoint kann anwendungsspezifisch gewählt werden.

Content area
HTML
<nav class="aui-nav aui-js-nav aui-nav--tab aui-theme-gray95">
	<div class="aui-nav__panel">
		<ul class="aui-nav__items">
			<li class="aui-nav__item">
				<a class="aui-nav__action is-active" href="#0">Link alpha</a>
			</li>
			<li class="aui-nav__item">
				<a class="aui-nav__action" href="#0">Link bravo</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" style="padding-left: 1.25rem; padding-right: 1.25rem;">
	Content area
</div>

<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
</style>
Content area
HTML

<nav class="aui-nav abp-pattern__nav-navigation-tabs-navigation aui-nav--small aui-js-nav aui-nav--tab aui-theme-gray95">
	<div class="aui-nav__panel">
		<ul class="aui-nav__items">
			<li class="aui-nav__item">
				<a class="aui-nav__action is-active" href="#0">Link alpha</a>
			</li>
			<li class="aui-nav__item">
				<a class="aui-nav__action" href="#0">Link bravo</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>

<div class="abp-pattern__nav-navigation-tabs-navigation leader-padding-10 trailer-padding-10 aui-color-gray90" style="padding-left: 1.25rem; padding-right: 1.25rem;">
	Content area
</div>

<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
</style>

Tabs and navigation bar

Die beiden Navigation Patterns können kombiniert eingesetzt werden, um zwei Navigationsebenen abzubilden.

HTML
<nav class="aui-nav aui-js-nav aui-nav--tab aui-theme-gray95">
	<div class="aui-nav__panel">
		<ul class="aui-nav__items">
			<li class="aui-nav__item">
				<a class="aui-nav__action is-active" href="#0">Link alpha</a>
			</li>
			<li class="aui-nav__item">
				<a class="aui-nav__action" href="#0">Link bravo</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">
	<div class="abp-pattern__nav-navigation-bar">
		<nav class="aui-nav aui-js-nav aui-nav--bar aui-nav--inline aui-theme-gray95">
			<div class="aui-nav__panel">
				<ul class="aui-nav__items">
					<li class="aui-nav__item"><a class="aui-nav__action is-active" href="#0">Link alpha</a></li>
					<li class="aui-nav__item"><a class="aui-nav__action" href="#0">Link bravo</a></li>
					<li class="aui-nav__item"><a class="aui-nav__action" href="#0">Link charlie</a></li>
				</ul>
			</div>
		</nav>
	</div>
</div>

<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
</style>

Sidebar navigation

Die Sidebar Navigation wird als Primärnavigation eingesetzt und kann einfache oder auch tiefergehende Hierarchien abbilden. Bei Bedarf werden zusätzlich zu den Textlinks auch Icons eingesetzt.

Ob die Navigation direkt sichtbar ist oder als Off-Canvas- Menü über eine Aktion aufgerufen werden muss, kann je nach Anwendung entschieden werden.

Als Off-Canvas Menü kann sie links oder rechts im Viewport platziert und in der Größe beliebig variiert werden. Bei kleinen Viewports wie etwa bei einer mobilen Anwendung nimmt das Menü die gesamte Fläche des Screens ein.

List navigation

Die List Navigation bildet eine vertikale Liste von Navigationspunkten ab und wird vor allem als Navigationshilfe im Inhaltsbereich eingesetzt. Die Navigationspunkte sind durch eine feine Linie voneinander getrennt.

Schriftschnitt und -größe können variiert werden – abhängig von Hierarchie und Viewportbreite. Bei Bedarf können Icons mit den Textlinks eingesetzt werden.

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

Die Tab Bar ist eine Sonderform der Navigation Bar, die bei nativen Anwendungen (sowohl iOS als auch Android) eingesetzt wird. Sie steht bevorzugt am unteren Rand des Viewports. Bei Tablet-Anwendungen im Querformat kann sie auch am linken Rand positioniert werden. Die Navigationspunkte werden als Icon oder als Kombination aus Icon und Label in Audi Type Screen Normal dargestellt. Der aktive Navigationspunkt wird durch eine Line am unteren Rand der Tab Bar hervorgehoben. Der Hintergrund der Tab Bar ist bevorzugt weiß oder schwarz.

Flyover

Das Flyover dient als Schnellzugriff für Abschnitte einer langen Inhaltsseite und wird über ein Icon aufgerufen. Innerhalb des Flyovers werden Links verwendet, die mit Icons kombiniert werden können.

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="#aui-icon-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="#0">Action (active at first)</a></li>
          <li class="aui-nav__item"><a class="aui-nav__action" href="#0">Link</a></li>
          <li class="aui-nav__item"><button class="aui-nav__action" type="button">Button</button></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Breadcrumb

Die Breadcrumb Navigation kann auf Seiten mit vielen Navigationsebenen eingesetzt werden. Auf großen Viewports werden alle Ebenen eines Navigationspfades abgebildet, auf kleinen Viewports nur die aktuelle Seite und ein Teil des Pfades.

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="#0">Audi</a></li>
    <li class="aui-breadcrumb__item"><a class="aui-breadcrumb__action" href="#0">Kundenbereich</a></li>
    <li class="aui-breadcrumb__item"><a class="aui-breadcrumb__action" href="#0">Reparatur und Service</a></li>
    <li class="aui-breadcrumb__item"><a class="aui-breadcrumb__action" href="#0">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: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Anwendungsbeispiele

Dos & Don’ts

Die Primärnavigation einer Webseite steht bevorzugt auf einem Bild. Zugunsten besserer Lesbarkeit wird hier auf den geringeren Kontrast der inaktive Punkte verzichtet.
Navigation Bar nicht auf Rot platzieren.
Tab Navigation nicht auf Rot platzieren.
List Navigation nicht auf Rot platzieren.
Breadcrumb nicht auf Rot platzieren.