Main Nav

Toggle example guides Toggle HTML markup

This is the Main Nav

The main nav relies on the smartmenus plugin which is added as a dependency to the pattern-lab. This plugin will need to be included to any environment in which the main nav component is used.

Markup: components/navigation/main-nav.twig
<header role="banner">
    <div class="header__inner-wrapper">
        <div class="block block-system block-system-branding-block" id="block-comicrelief-branding">
            <a class="site-logo" href="/" rel="home" tabindex="2" title="Home">
                <img alt="Home" src="/themes/custom/comicrelief/logo.svg">
            </a>
        </div>
        <div class="main-nav__wrapper">
            <div class="main-nav__icons main-nav__burger">
                <a aria-expanded="false" aria-haspopup="true" aria-label="Open and close Navigation Menu, 11 items listed" class="c-hamburger c-hamburger--htx main-nav-toggle" href="#" role="button">
                    <div class="c-hamburger__text">
                        <span class="visually-hidden">Open and close nav menu</span>
                    </div>
                    <span></span>
                </a>
            </div>
            <nav aria-labelledby="block-comicrelief-main-menu-menu" class="block block-menu navigation menu--main" id="block-comicrelief-main-menu" role="navigation">
                <h2 class="visually-hidden" id="block-comicrelief-main-menu-menu">Main navigation</h2>
                <ul class="menu sm main-nav__items menu--level-0" id="main-menu">
                    <li class="menu-item menu-item--expanded">
                        <a aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="node/986" href="/what-we-do">
                            <span class="menu-item__text">What Your Money Does</span>
                        </a>
                        <ul class="menu main-nav__items menu--level-1">
                            <li class="menu-item menu-item--duplicate">
                                <a href="/what-we-do">
                                    <span class="menu-item__text">What Your Money Does</span>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a data-drupal-link-system-path="node/126" href="/What-we-do/our-legacy">
                                    <span class="menu-item__text">Our legacy</span>
                                    </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item--expanded">
                        <a aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="node/736" href="/funding">
                            <span class="menu-item__text">Funding</span>
                        </a>
                        <ul class="menu main-nav__items menu--level-1">
                            <li class="menu-item menu-item--duplicate">
                                <a href="/funding">
                                    <span class="menu-item__text">Funding</span>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="/funding/applying-for-grants">
                                    <span class="menu-item__text">Applying for funding</span>
                                    </a>
                            </li>
                            <li class="menu-item">
                                <a data-drupal-link-system-path="node/49" href="/funding/current-opportunities">
                                    <span class="menu-item__text">Current opportunites</span>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="/funding/managing-your-grant">
                                    <span class="menu-item__text">Managing your funding</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a data-drupal-link-system-path="node/1034" href="/schools">
                            <span class="menu-item__text">Schools</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="/fundraising/red-nose-day">
                            <span class="menu-item__text">Red Nose Day</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="block block-cr-meta-icons" id="block-comicrelief-metaiconsblock">
            <div class="meta-icons">
                <a class="btn btn--green donate" href="https://www.comicrelief.com/donate" target="_blank">
                   Donate
                </a>
                <a class="meta-icons__magnify has-tooltip" href="#" role="button" title="Search">
                    <svg class="icon" focusable="false" tabindex="-1">
                        <use xlink:href="#icon-magnify"></use>
                    </svg>
                </a>
                <a class="meta-icons__esu-toggle has-tooltip" href="#" role="button" title="Sign up for emails">
                    <svg class="icon" focusable="false" tabindex="-1">
                        <use xlink:href="#envelope"></use>
                    </svg>
                    <span>Sign up for emails</span>
                </a>
            </div>
        </div>
    </div>
</header>

Source: _cr19-styleguide.scss, line 591