govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

  <section aria-label="Service information" class="govuk-service-navigation govuk-service-navigation--inverse"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      
        <span class="govuk-service-navigation__service-name">
            <a href="#/" class="govuk-service-navigation__link">
              Apply for a juggling license
            </a>
        </span>

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden aria-hidden="true">
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/1">
                                    
Navigation item 1
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
                  <a class="govuk-service-navigation__link" href="#/2" aria-current="true">
                                    
                  <strong class="govuk-service-navigation__active-fallback">Navigation item 2</strong>

                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/3">
                                    
Navigation item 3
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/4">
                                    
Navigation item 4
                  </a>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </section>