Barele de navigare sunt un element foarte important pentru orice site web. Acestea oferă principala metodă de navigare prin furnizarea unei liste principale de linkuri către un utilizator. Există multe metode pentru crearea unei bare de navigare. Cel mai simplu mod de a crea o bară de navigare este să utilizați o listă neordonată și să o stilizați cu CSS.

Barele de navigare sunt formate în mare parte din <ul> liste care sunt aranjate orizontal și stilate.

În timp ce stilizați barele de navigare, este obișnuit să eliminați spațiul suplimentar creat de <ul> și <li> etichete, precum și punctele glonț care sunt inserate automat:

   list-style-type: none;
   margin: 0px;
   padding: 0px;

Exemplu:

Există două părți pentru orice navigație: HTML și CSS. Acesta este doar un exemplu rapid.

<nav class="myNav">                                 <!-- Any element can be used here -->
    <ul>
        <li><a href="https://www.freecodecamp.org/news/how-to-build-a-navigation-bar/index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
/* Define the main Navigation block */
.myNav {
    display: block;
    height: 50px;
    line-height: 50px;
    background-color: #333;
}
/* Remove bullets, margin and padding */
.myNav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.myNav li {
    float: left;
    /* Or you can use display: inline; */
}
/* Define the block styling for the links */
.myNav li a {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
}
/* This is optional, however if you want to display the active link differently apply a background to it */
.myNav li a.active {
    background-color: #3786E1;
}