# Navigation
> The navigation defines how the user accesses pages of content. So whenever you have an app that contains multiple pages you need to choose a suitable navigation.

Basically there are two types of navigation:

In short the sidebar is recommended for applications with many pages and even subpages.
The tab navigation should only be used for a limited number of pages (up to 7 pages).
For more complex applications it is possible to combine both patterns.

## Tab navigation

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use for a navigation with upto appr. 7 pages.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The tab navigation is a horizontal list of clickable page titles at the
      top of the main container. It stays visible and fixed, while the content
      underneath changes due to the selected tab. The active tab is clearly
      highlighted to give orientation to the user.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The tab navigation is at the top of the screen while the content container
      is below. When scrolling the tab navigation remains fixed and the content
      container scrolls underneath it.
      <br />
      The first tab should be active by default.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/nav-bar">Nav Bar</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Demo</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="https://next--698f15fa99e7b146f9002f64.chromatic.com/?path=/story/demos-applayouts-headerbased--nav-bar">
            App layout
          </Link>
        </li>
        <li>
          <Link href="https://next--698f15fa99e7b146f9002f64.chromatic.com/?path=/story/components-navbar--with-app-frame">
            Storybook example
          </Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Sidebar

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use for a navigation with multiple pages.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The sidebar navigation is a vertical list of clickable page titles at the
      left of the main container. It stays visible and fixed, while the content
      next to it changes due to the selected item. The active item is clearly
      highlighted to give orientation to the user.
      <br />
      The sidebar can either be integrated as level 1 component as layout with a
      sidebar or as subordinated component with a layout with a header.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The sidebar navigation is at the left of the screen while the content
      container is next to it. When scrolling the sidebar navigation remains
      fixed.
      <br />
      The first item should be active by default.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/sidebar-navigation">Sidebar Navigation</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Demos</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="https://next--698f15fa99e7b146f9002f64.chromatic.com/?path=/story/demos-applayouts-headerbased--sidebar">
            App layout
          </Link>
        </li>
        <li>
          <Link href="https://next--698f15fa99e7b146f9002f64.chromatic.com/?path=/story/components-sidebarnavigation--without-visuals">
            Storybook example
          </Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Tab navigation and sidebar

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      You can choose to combine the tab navigation for your primary pages with a
      sidebar for you subpages.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The tab navigation serves as your primary navigation. The sidebar can be
      used additionally to offer navigation of subpages.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The tab navigation is on the top, any content, including the sidebar goes
      underneath it. The sidebar navigation is at the left of the screen while
      the content container is next to it. When scrolling the sidebar navigation
      remains fixed.
      <br />
      The first tab and the first item of the sidebar should be active by
      default.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/nav-bar">Nav Bar</Link>
        </li>
        <li>
          <Link href="/components/sidebar-navigation">Sidebar Navigation</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Demos</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="https://next--698f15fa99e7b146f9002f64.chromatic.com/?path=/story/demos-applayouts-headerbased--content-sidebar">
            App layout
          </Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>