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>