Header

Default

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{}} />

With service name

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  serviceName: "Service Name",
  serviceUrl: "/components/header"
}} />

With service name but no service url

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  serviceName: "Service Name"
}} />

With navigation

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  navigation: [
    {
      href: "#1",
      text: "Navigation item 1",
      active: true
    },
    {
      href: "#2",
      text: "Navigation item 2"
    },
    {
      href: "#3",
      text: "Navigation item 3"
    },
    {
      href: "#4",
      text: "Navigation item 4"
    }
  ]
}} />

With custom navigation label

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  navigationLabel: "Custom navigation label",
  navigation: [
    {
      href: "#1",
      text: "Navigation item 1",
      active: true
    },
    {
      href: "#2",
      text: "Navigation item 2"
    },
    {
      href: "#3",
      text: "Navigation item 3"
    },
    {
      href: "#4",
      text: "Navigation item 4"
    }
  ]
}} />

With custom menu button text

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  menuButtonText: "Dewislen",
  navigation: [
    {
      href: "#1",
      text: "Eitem llywio 1",
      active: true
    },
    {
      href: "#2",
      text: "Eitem llywio 2"
    },
    {
      href: "#3",
      text: "Eitem llywio 3"
    },
    {
      href: "#4",
      text: "Eitem llywio 4"
    }
  ]
}} />

With custom menu button label

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  menuButtonLabel: "Custom button label",
  navigation: [
    {
      href: "#1",
      text: "Navigation item 1",
      active: true
    },
    {
      href: "#2",
      text: "Navigation item 2"
    },
    {
      href: "#3",
      text: "Navigation item 3"
    },
    {
      href: "#4",
      text: "Navigation item 4"
    }
  ]
}} />

With service name and navigation

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  serviceName: "Service Name",
  serviceUrl: "/components/header",
  navigation: [
    {
      href: "#1",
      text: "Navigation item 1",
      active: true
    },
    {
      href: "#2",
      text: "Navigation item 2"
    },
    {
      href: "#3",
      text: "Navigation item 3"
    },
    {
      href: "#4",
      text: "Navigation item 4"
    }
  ]
}} />

With large navigation

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  navigation: [
    {
      href: "/browse/benefits",
      text: "Benefits"
    },
    {
      href: "/browse/births-deaths-marriages",
      text: "Births, deaths, marriages and care"
    },
    {
      href: "/browse/business",
      text: "Business and self-employed"
    },
    {
      href: "/browse/childcare-parenting",
      text: "Childcare and parenting"
    },
    {
      href: "/browse/citizenship",
      text: "Citizenship and living in the UK"
    },
    {
      href: "/browse/justice",
      text: "Crime, justice and the law"
    },
    {
      href: "/browse/disabilities",
      text: "Disabled people"
    },
    {
      href: "/browse/driving",
      text: "Driving and transport"
    },
    {
      href: "/browse/education",
      text: "Education and learning"
    },
    {
      href: "/browse/employing-people",
      text: "Employing people"
    },
    {
      href: "/browse/environment-countryside",
      text: "Environment and countryside"
    },
    {
      href: "/browse/housing-local-services",
      text: "Housing and local services"
    },
    {
      href: "/browse/tax",
      text: "Money and tax"
    },
    {
      href: "/browse/abroad",
      text: "Passports, travel and living abroad"
    },
    {
      href: "/browse/visas-immigration",
      text: "Visas and immigration"
    },
    {
      href: "/browse/working",
      text: "Working, jobs and pensions"
    }
  ]
}} />

With product name

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  navigationClasses: "govuk-header__navigation--end",
  productName: "Product Name"
}} />

Full width

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  containerClasses: "govuk-header__container--full-width",
  navigationClasses: "govuk-header__navigation--end",
  productName: "Product Name"
}} />

Full width with navigation

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  containerClasses: "govuk-header__container--full-width",
  navigationClasses: "govuk-header__navigation--end",
  productName: "Product Name",
  navigation: [
    {
      href: "#1",
      text: "Navigation item 1",
      active: true
    },
    {
      href: "#2",
      text: "Navigation item 2"
    },
    {
      href: "#3",
      text: "Navigation item 3"
    }
  ]
}} />

Navigation item with html

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  serviceName: "Service Name",
  serviceUrl: "/components/header",
  navigation: [
    {
      href: "#1",
      html: "<em>Navigation item 1</em>",
      active: true
    },
    {
      href: "#2",
      html: "<em>Navigation item 2</em>"
    },
    {
      href: "#3",
      html: "<em>Navigation item 3</em>"
    }
  ]
}} />

Navigation item with text without link

Svelte code

<script>
	import { Header } from '@danboscaro/govuk-svelte'
</script>

<Header {...{
  serviceName: "Service Name",
  serviceUrl: "/components/header",
  navigation: [
    {
      text: "Navigation item 1"
    },
    {
      text: "Navigation item 2"
    },
    {
      text: "Navigation item 3"
    }
  ]
}} />