Pegasus
Get Started
Components
Navigation
Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer. The Navigation component also ensures a consistent and predictable user experience by adhering to an established set of principles.
Navigation for e-commerce
Below is an example of a navigation bar which a user can use while making a e-commerce website.
<div class="navigation-container">
<div class="left">
<h5>e-commerce</h5>
</div>
<div class="middle">
<input type="search" placeholder="search here.." id="search-input">
<label for="search-input" class="fas fa-search"></label>
</div>
<div class="right">
<nav class="nav-links">
<a href="#" class="fas fa-user"></a>
<a href="#" class="fa fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
</nav>
</div>
</div>
Navigation for landing page.
Below is an example of a navigation bar, which can be used while making a landing page.
<div class="navigation-container">
<div class="left">
<h5>Pegasus</h5>
</div>
<div class="right">
<nav class="nav-links landing-page-links">
<a href="#" class="">Github</a>
<a href="#" class="">Twitter</a>
<a href="#" class="">LinkedIn</a>
</nav>
</div>
</div>