Coffee Luv Bug Design System

Top Navigation Bar

The navigation menu is used to display the primary navigation in the header of our application. It is used to move between pages in the application.

Here is the example of our app's nav menus,

Navbar Link Link Link

Here is the html code of our app's top nav bar,

        
        <div class="topnav">
        <a href="#Link"><Navbar></a>
        <a href="#Link">Link</a>
        <a href="#Link">Link</a>
        <a href="#Link">Link</a>
        </div>

Here is the css code of our app's top nav bar,

        
           .topnav {
            background-color:#7a8f99;
            overflow: hidden;
            }
            
            .topnav a {
            float: left;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
            }
            .topnav a:hover {
            color: #e3d2b0;
            }