Use 100% width on Service Navigation by default

[joelanman]

Related component

Service Navigation

Context

Trying to add right aligned links (Sign in/Sign out and so on).

I think it might be better for the Service Navigation to have 100% width by default, to make it easier to add quite a common pattern - right aligned elements.

I can add css to align them right, but only if the navigation wrapper has 100% width. So my code looks like this (note the wrapper css):

{{ govukHeader({ serviceName: serviceName, classes:"govuk-header--full-width-border"}) }}

<style>
    .govuk-service-navigation__wrapper{
        flex-grow: 1;
    }
</style>

{% set navigationEnd %}
  <li class="govuk-service-navigation__item" style="margin-left: auto;">
    <a class="govuk-service-navigation__link" href="#">Sign out</a>
  </li>
{% endset %}

{{ govukServiceNavigation({

    navigation: [
      {
        href: "#",
        text: "Section A"
      },
      {
        href: "#",
        text: "Section B"
      }
    ],
    slots: {
        navigationEnd: navigationEnd
    }
  }) }}

Alternatives

I'm applying 100% width as an override

Additional information (if applicable)