<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic usa-header--megamenu">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo" id="basico-mega-logo">
<em class="usa-logo__text">
<a href="javascript:void(0)" title="<Project title>">
<Project title>
</a>
</em>
</div>
<button class="usa-menu-btn">Menú</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<button class="usa-nav__close">
<img src="../../../dist/img/usa-icons/close.svg" role="img" alt="Cerrar">
</button>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="basico-mega-nav-section-one">
<span><Current section></span>
</button>
<div id="basico-mega-nav-section-one" class="usa-nav__submenu usa-megamenu">
<div class="grid-row grid-gap-4">
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<A very long navigation link that goes onto two lines>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basico-mega-nav-section-two">
<span><Section></span>
</button>
<div id="basico-mega-nav-section-two" class="usa-nav__submenu usa-megamenu">
<div class="grid-row grid-gap-4">
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<A very long navigation link that goes onto two lines>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="usa-nav__primary-item">
<a href="javascript:void(0)" class="usa-nav__link">
<span><Simple link></span>
</a>
</li>
</ul>
<form class="usa-search usa-search--small" role="search">
<label class="usa-sr-only" for="basico-mega-search-field-es-small">
Buscar
</label>
<input class="usa-input" id="basico-mega-search-field-es-small" type="search" name="search">
<button class="usa-button" type="submit">
<span class="usa-sr-only">Buscar</span>
</button>
</form>
</nav>
</div>
</header>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()
nav:
aria_label: Primary navigation
lang: es
header:
primary:
search: true
search_header: true
id_prefix: basico-mega-
mega: true