Mobile nav

As the structure of the navigation is so complex, we splited the navigation into two parts, the desktop version and the mobile version. This component represents the mobile version.

Default

px

			
				<div class="m-mobile-nav ">
	<div class="m-mobile-nav__content">
		<div class="m-collapse js-m-collapse m-mobile-nav__collapse">
			<div class="m-collapse__header m-mobile-nav__header">
				<a class="m-mobile-nav__title" href="">Over batterijen</a>
				<button class="m-collapse__header__button m-mobile-nav__button icon-arrow-down-s"></button>
			</div>
			<div class="m-collapse__content m-mobile-nav__content">
				<div class="m-collapse__content__container m-mobile-nav__content-container">
					<ul class="m-list m-list--no-type m-mobile-nav__content-list">
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__mainlink" href="">Recycleren thuis</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Zakjes aanvragen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Inzamelpunt vinden</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Veiligheid bij gebruik</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Inzamelpunt worden</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Tombola</a>
						</li>
					</ul>
					<ul class="m-list m-list--no-type m-mobile-nav__content-list">
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__mainlink" href="">Meer leren</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Scholenprogramma</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Educatief downloadcenter</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Batteripedia</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Recyclageproces</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Bezoek aan Villa Pila</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="m-collapse js-m-collapse m-mobile-nav__collapse">
			<div class="m-collapse__header m-mobile-nav__header">
				<a class="m-mobile-nav__title" href="">Aanbod voor professionelen &amp; instellingen</a>
				<button class="m-collapse__header__button m-mobile-nav__button icon-arrow-down-s"></button>
			</div>
			<div class="m-collapse__content m-mobile-nav__content">
				<div class="m-collapse__content__container m-mobile-nav__content-container">
					<ul class="m-list m-list--no-type m-mobile-nav__content-list">
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__mainlink" href="">Inzamelen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Inzamelpunt worden</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Zakjes aanvragen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Ophaling aanvragen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Veiligheid bij inzamelen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Aanvaardingsplicht voor eindverkopers</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Inzamelen op school</a>
						</li>
					</ul>
					<ul class="m-list m-list--no-type m-mobile-nav__content-list">
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__mainlink" href="">Produceren en invoeren</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Registreer je onderneming</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Aangifte doen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Wetgeving</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Aanvaardingsplicht</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Milieubijdragen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Electrische voertuigen</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="m-collapse js-m-collapse m-mobile-nav__collapse">
			<div class="m-collapse__header m-mobile-nav__header">
				<a class="m-mobile-nav__title" href="">Over Bebat</a>
				<button class="m-collapse__header__button m-mobile-nav__button icon-arrow-down-s"></button>
			</div>
			<div class="m-collapse__content m-mobile-nav__content">
				<div class="m-collapse__content__container m-mobile-nav__content-container">
					<ul class="m-list m-list--no-type m-mobile-nav__content-list">
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__mainlink" href="">Over Bebat</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Geschiedenis</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Bebat in cijfers</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Pers</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Campagnes</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Blog</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Onze services</a>
						</li>
					</ul>
					<ul class="m-list m-list--no-type m-mobile-nav__content-list">
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__mainlink" href="">Produceren en invoeren</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">Contacteer ons</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">0800 97 521</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link" href="">FAQ</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="m-collapse js-m-collapse m-mobile-nav__collapse">
			<div class="m-collapse__header m-mobile-nav__header">
				<a class="m-mobile-nav__title icon-question" href="">Hulp nodig?</a>
				<button class="m-collapse__header__button m-mobile-nav__button icon-arrow-down-s"></button>
			</div>
			<div class="m-collapse__content m-mobile-nav__content">
				<div class="m-collapse__content__container m-mobile-nav__content-container">
					<ul class="m-list m-list--no-type m-mobile-nav__content-list">
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link icon-question" href="">Bekijk de FAQ</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link icon-mail" href="">info@bebat.be</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link icon-telephone" href="">0800 97 54 21</a>
						</li>
						<li class="m-list__item">
							<a class="a-link m-mobile-nav__link icon-chat-single" href="">Chat met één van onze collega&#39;s</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="m-mobile-nav__languages js-m-language">
		<ul class="m-list m-list--inline m-mobile-nav__languages-list">
			<li class="m-list__item is-active m-mobile-nav__languages-item"><a href="/">NL</a></li>
			<li class="m-list__item m-mobile-nav__languages-item"><a href="/">FR</a></li>
			<li class="m-list__item m-mobile-nav__languages-item"><a href="/">EN</a></li>
		</ul>
	</div>
</div>