# Settings
> The settings let users change the functionality, behaviour and look of an application.

## Settings in header

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Whenever there is an application header it should contain a settings icon
      on its right side second position. Clicking this icon opens the settings.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Regular behaviour of a nav button of the header.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/tokens/icons">Settings icon</Link>
        </li>
        <li>
          <Link href="/components/app-header">App Header</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

### Settings as drawer

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Whenever the settings are opened via an icon in the application header and
      do not contain a lot of content it is recommended to show them on a
      drawer. (If they do contain a lot of data you have to use a landing page
      to display the settings)
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The drawer opens from the right and overlaps any content. It can be closed
      by clicking the close x icon.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Component</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <Link href="/components/drawer">Drawer</Link>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Settings in sidebar

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Whenever there is no application header but a sidebar, the sidebar should
      contain a settings icon on the sidebar footer, above the avatar. Clicking
      this icon opens the settings.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Regular behaviour of a sidebar item.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/tokens/icons">Settings icon</Link>
        </li>
        <li>
          <Link href="/components/sidebar-navigation">Sidebar Navigation</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

### Settings as landing page

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Whenever the settings are opened via an icon in the sidebar or do not
      contain a lot of content it is recommended to show them on a landing page.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The page opens as a regular landing page. Its page layout can be set to
      centered. The settings sidebar item should be active.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Component</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <Link href="/components/sidebar-navigation">Sidebar Navigation</Link>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>