Navigation

Navigation bar is used to navigate through the website. This navigation component is responsive, it turns into a hamburger menu in medium and small devices. In order to only use the List Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document.

                
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Navigation/navigation.css" />

Simple Navigation

This navigation component is responsive, it turns into a hamburger menu in medium and small devices. To use this you just need to add class name nav-bar followed by sub classes shown below. You can copy the html part from below code snippet.

                    
                <nav class="nav-bar">
                    <div class="nav-txt"><i class="nav-logo fab fa-drupal"></i>MyWebsite</div>
                    <button class="icon-in-nav"><i class="fa-solid fa-user"></i></button>
                    <button class="icon-in-nav"><i class="fa-solid fa-heart"></i></button>
                    <button class="icon-in-nav"><i class="fa-solid fa-cart-shopping"></i></button>
                    <button class="icon-in-nav nav-hamburger"><i class="fas fa-bars"></i></button>
                </nav>