Skip to main content
Components

Navigation

Contents

                    
<nav class="fcdo-navigation" role="navigation" aria-label="Navigation">
    <div class="govuk-width-container fcdo-navigation__container">
        <button class="fcdo-navigation__toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Toggle menu" id="navigationToggle">
        Menu
        </button>
        <ul id="navigationMenu" class="fcdo-navigation__list" hidden>
            <li class="fcdo-navigation__item fcdo-navigation__item--active">
                <a href="#" class="fcdo-navigation__link">Navigation Item 1</a>
            </li>
            <li class="fcdo-navigation__item">
                <a href="#" class="fcdo-navigation__link">Navigation Item 2</a>
            </li>
            <li class="fcdo-navigation__item">
                <a href="#" class="fcdo-navigation__link">Navigation Item 3</a>
            </li>
        </ul>
    </div>
</nav>
                
                

Component Information

The Navigation component helps users understand that they’re using your service and lets them navigate around your service.