A
Anonymous

Navigation Bar Component - Copy this Angular, Css Component to your project

<nav class="navbar navbar expand lg custom navbar"> <div class="container d flex g 4"> <! IMMAGINE > <div class="col 1 ml 5"> <img class="imgUccelli " src="../../assets/uccelliNavBar.png" alt="Lucherino e cardellino su un ramo"> </div> <! Titolo > <div class="col 5 mt 3 mb 2"> <h1 class="navbar title"> L'Allevamento sportivo di Beppe </h1> </div> <! Bottone per dispositivi mobili > <button class="navbar toggler" type="button" data bs toggle="collapse" data bs target="#navbarNav" aria controls="navbarNav" aria expanded="false" aria label="Toggle navigation"> <span class="navbar toggler icon"></span> </button> <! Menu di navigazione > <div class="col 6 collapse navbar collapse " id="navbarNav"> <ul class="navbar nav ms auto text end"> <li class="nav item"> <a class="nav link active" aria current="page" [routerLink]="['/home']">Home</a> </li> <li class="nav item"> <a class="nav link" href="#">Galleria</a> </li> <li class="nav item"> <a class="nav link" [routerLink]="['/contatti']">Contattaci</a> </li> <li class="nav item divFlag"> <div> <a> <img class="flag" src="../../assets/flags/it.png" alt="italian flag"> </a> <a> <img class="flag " src="../../assets/flags/en.png" alt="english flag"> </a> <a> <img class="flag " src="../../assets/flags/de.png" alt="deutch flag"> </a> <a> <img class="flag" src="../../assets/flags/es.png" alt="spanish flag"> </a> </div> </li> </ul> </div> </div> </nav>

Prompt
Component Preview

About

Navigation Bar Component - A responsive navbar with logo, toggle button, and multi-language flags, professionally built with Angular and CSS. Access free code!

Share

Last updated 1 month ago