# SiteHeader

The standard Reuters.com site header with logo, nav bar and mobile menu, fetching live section data in production.

**Category:** Components/Page furniture/SiteHeader

**Import:** `import { SiteHeader } from '@reuters-graphics/graphics-components'`

## Examples

### Demo

```svelte
<div>
  <SiteHeader />
</div>
```

### Customised theme

```svelte
<div>
  <Theme base="dark">
    <SiteHeader />
  </Theme>
</div>
```

## Documentation

# SiteHeader

Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).

> **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.

```svelte
<script>
  import { SiteHeader } from '@reuters-graphics/graphics-components';
</script>

<SiteHeader />
```

## Dark theme

Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-siteheader--customised-theme))

```svelte
<script>
  import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
</script>

<Theme base="dark">
  <SiteHeader />
</Theme>
```