Navigation

Navigation is necessary in ensuring that your website is accessible and usable. Good navigation will allow visitors to search your site for longer, giving them confidence in where they are and what they can receive from your website. Navigation allows visitors to search with ease. Hydrogen provides reponsive navigation that you can use in your e-commerce website.

Simple Navigation

<div class="hy-header-wrapper">
<nav class="hy-navbar p-sm">
<div class="hy-navbar-links-container mr-1">
<div>
<button type="button" class="btn hy-hamburger-btn">
<i class="fas fa-bars" title="menu"></i>
</button>
<figure class="hy-logo">Logo</figure>
</div>
<div>
<ul class="hy-navbar-links">
<li class="mr-1">
<a href="#">
<i
class="far fa-heart"
title="Wishlist"
aria-hidden="true"
></i>
<span class="visually-hidden">Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i
class="fas fa-shopping-cart"
title="Shopping Cart"
></i>
<span class="visually-hidden">
Shopping Cart
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="hy-search-box">
<input
type="search"
placeholder="Search for producs, brands and more.."
/>
<button class="btn hy-search-btn" type="submit">
<i class="fas fa-search" title="search"></i>
</button>
</div>
</nav>
</div>
view raw navigation.html hosted with ❤ by GitHub
Modal Rating