Components

<nav class="nav" id="nav">
	<div class="mobile-bg-container">
		<div class="mobile-bg"></div>
	</div>

	<div class="container">
		<div class="nav__bg-wrapper">
			<div class="nav__bg"></div>
		</div>
		<div class="brand">
			<a href="https://nextcloud.com/homepage">
				<div class="logo"></div>
			</a>
		</div>

		<button type="button" class="navbar-toggle collapsed" id="toggle">
			<div class="menu-animation" data-animation-path="img/menu/black/" data-anim-loop="false" data-name="menu-black" id="menu-black"></div>
		</button>
		<div class="nav__sections-wrapper">
			<ul class="nav__sections">

				<li class="nav__section"><a class="nav__label">News</a>
					<ul class="nav__links">
						<li class="nav__item"><a href="https://nextcloud.com/news">Blog</a></li>
						<li class="nav__item"><a href="https://newsletter.nextcloud.com">Newsletter</a></li>
						<li class="nav__item"><a href="https://twitter.com/nextclouders">Twitter</a></li>
						<li class="nav__item"><a href="https://www.facebook.com/Nextcloud-1032807203462807/">Facebook</a></li>
						<li class="nav__item"><a href="https://plus.google.com/b/104036748063781940910/104036748063781940910/about">Google+</a></li>
					</ul>
				</li>

				<li class="nav__section"><a class="nav__label">Features</a>
					<ul class="nav__links">
						<li class="nav__item"><a href="https://nextcloud.com/features">Overview</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/secure">Security</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/sharing">Sharing</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/clients">Clients</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/workflow">Workflow</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/monitoring">Monitoring</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/collabora">Online office</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/webrtc">Video chat</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/outlook">Outlook integration</a></li>
					</ul>
				</li>

				<li class="nav__section"><a class="nav__label">Enterprise</a>
					<ul class="nav__links">
						<li class="nav__item"><a href="https://nextcloud.com/enterprise">Overview</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/pricing">Pricing</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/buy">Get an offer</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/order">Order online</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/migration">Migration</a></li>
					</ul>
				</li>

				<li class="nav__section"><a class="nav__label">Support</a>
					<ul class="nav__links">
						<li class="nav__item"><a href="https://nextcloud.com/support">Support options</a></li>
						<li class="nav__item"><a href="https://docs.nextcloud.com/server/11/user_manual/">User Documentation</a></li>
						<li class="nav__item"><a href="https://docs.nextcloud.com/server/11/admin_manual/">Admin Documentation</a></li>
						<li class="nav__item"><a href="https://help.nextcloud.com">Help on the forums</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/security">Security information</a></li>
					</ul>
				</li>

				<li class="nav__section"><a class="nav__label">Get involved</a>
					<ul class="nav__links">
						<li class="nav__item"><a href="https://nextcloud.com/contribute">How to contribute</a></li>
						<li class="nav__item"><a href="https://github.com/nextcloud">Code on GitHub</a></li>
						<li class="nav__item"><a href="https://github.com/nextcloud/server/issues/new">Report a bug</a></li>
						<li class="nav__item"><a href="https://docs.nextcloud.com/server/11/developer_manual/">Developer Documentation</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/code-of-conduct/">Code of Conduct</a></li>
					</ul>
				</li>

				<li class="nav__section"><a class="nav__label">About</a>
					<ul class="nav__links">
						<li class="nav__item"><a href="https://nextcloud.com/about">About us</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/team">Team</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/contributors">Community</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/events">Events</a></li>
						<li class="nav__item"><a href="https://nextcloud.com/jobs">Jobs</a></li>
					</ul>
				</li>

			</ul>
			<ul class="right-buttons">
				<li class="ghost-btn"><a href="https://demo.nextcloud.com/" class="nav__label">Demo</a></li>
				<li class="ghost-btn"><a href="https://nextcloud.com/install/" class="nav__label">Downloads</a></li>
			</ul>
		</div>
	</div>
	</div>
</nav>