Service header – usage example

1. Basic (no secondary navigation)

Nunjucks code


         {{ govukOneLoginServiceHeader({ signOutLink: "/test"}) }}

2. With new Service Navigation component, passing in updated parameters

Nunjucks code


        
          {{ govukOneLoginServiceHeader({
            signOutLink:  "/test", 
            serviceNavigationParams: { 
              navigation: [
              {
                href: "#navigation1", 
                text: "Navigation item 1" 
              },{
                href: "#navigation2", 
                text: "Navigation item 2",
                active: true
              },{
                href: "#navigation3", 
                text: "Navigation item 3"
              }], 
              serviceName: "A very useful service with a relatively long name", 
              navigationLabel: "Test label" 
            }
          })}}

The code above is for reference for Nunjucks users only – if you do not use Nunjucks in your service please follow the instructions to copy the header into your service.

3. With new Service Navigation component, but using legacy parameters (DEPRECATED: migrate to parameter structure for version 2 above)

Nunjucks code


        
          {{ govukOneLoginServiceHeader({ 
            navigationItems: [
            {
              href: "#example1",
              text: 'Example link 1',
              id: 'id1'
            },{
              href: "#example2",
              text: 'Example link 2',
              id: 'id2'
            },{
              href: "#example3",
              text: 'Example link 3',
              id: 'id3'
            }], 
            serviceName: "A very useful service with a relatively long name", 
            activeLinkId: "id3", 
            signOutLink: "/test" 
            }) 
          }}

The code above is for reference for Nunjucks users only – if you do not use Nunjucks in your service please follow the instructions to copy the header into your service.