NAVBAR IN BOOTSTRAP FIVE

NAVBAR

A navigation bar is a navigation header normally placed at the top of the page:

With Bootstrap, a navigation bar can stretch or collapse, depending on the size of the screen. A standard navigation bar with the class .navbar is created, followed by a responsive compression class: .navbar-expand-xxl | xl | lg | md | sm (stacks the navigation bar vertically on xxlarge, extra large, large screens , medium or small). To add links within the navigation bar, use a <ul> element (or a <div>) with class = “navbar-nav“. Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class:

EXAMPLE OF NAVBAR BASIC CODE

Copy to Clipboard

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>Basic Navbar Example</h3>
  <p>Una barra di navigazione è un'intestazione di navigazione posizionata nella parte superiore della pagina.</p>
  <p>La classe navbar-expand-xxl|xl|lg|md|sm determina quando la barra di navigazione deve essere 
      impilata verticalmente (su schermi xxlarge, extra large, large, medium o small).</p>
</div>
</body>
</html>

VERTICAL NAVBAR

Remove the .navbar-expand- * class to create a navigation bar that will always be vertical:

<!– A grey vertical navbar –>
<nav class=”navbar bg-light“>
…
</nav>

CENTER A NAVBAR

Add the .justify-content-center class to center the navigation bar:

COLORS OF THE NAVBAR

Use one of the .bg-color classes to change the background color of the navigation bar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary,. bg -dark and .bg-light). Tip: Add a white text color to all links in the navigation bar with the .navbar-dark class or use the .navbar-light class to add a black text color.

CODE EXAMPLE

Copy to Clipboard

<div class="container mt-3">
  <h3>Colored Navbar</h3>
  <p>Usa una qualsiasi delle classi .bg-color per aggiungere un colore di sfondo alla barra di navigazione.</p>
  <p>Suggerimento: aggiungi un colore di testo bianco a tutti i collegamenti nella barra di navigazione con la classe 
    .navbar-dark oppure usa la classe .navbar-light per aggiungere un colore di testo nero.</p>
</div>

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-sm bg-info navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
</body>
</html>

BRAND / LOGO

When using the .navbar-brand class with images, Bootstrap 5 will automatically shape the image to fit vertically on the navigation bar.

CODE EXAMPLE

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://83dc87d8.delivery.rocketcdn.me/wp-content/cache/min/1/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js?ver=1746910757" data-rocket-defer defer></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
       <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Avatar Logo" style="width:40px;" class="rounded-pill" data-lazy-src="https://www.marcoalbasini.com/myfolder/img/avatar.png"><noscript><img decoding="async" src="https://www.marcoalbasini.com/myfolder/img/avatar.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"></noscript> 
      </a>
    </div>
  </nav>
</body>
</html>

NAVBAR TEXT

Use the .navbar-text class to vertically align all elements within the navigation bar that are not links (ensures correct padding and text color).

<nav class=”navbar navbar-expand-sm bg-dark navbar-dark“>
  <div class=”container-fluid“>
    <span class=”navbar-text“>Navbar text</span>
  </div>
</nav>

Quite often, especially on small screens, you want to hide navigation links and replace them with a button that should reveal them when clicked. To create a collapsible navigation bar, use a button with class = “navbar-toggler”, data-bs-toggle = “collapse” and data-bs-target = “# thetarget”. Then wrap the contents of the navigation bar (links, etc.) inside a <div> element with class = “collapse navbar-collapse“, followed by an id that corresponds to the button’s data-bs-target: “thetarget “.

Copy to Clipboard

<div class="container-fluid mt-3">
  <h3>Collapsible Navbar</h3>
  <p>In questo esempio, la barra di navigazione è nascosta su piccoli schermi e sostituita da un pulsante nell'angolo in alto a destra
       (prova a ridimensionare questa finestra).
    </p>
  <p>Solo quando si fa clic sul pulsante, verrà visualizzata la barra di navigazione.</p>
  <p>Suggerimento: puoi anche rimuovere la classe .navbar-expand-md per nascondere SEMPRE 
      i collegamenti della barra di navigazione e visualizzare il pulsante di commutazione.</p>
</div>
</body>
</html>

NAVBAR WITH DROP-DOWN

CODE EXAMPLE

Copy to Clipboard

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>  
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Link</a></li>
            <li><a class="dropdown-item" href="#">Another link</a></li>
            <li><a class="dropdown-item" href="#">A third link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid mt-3">
  <h3>Navbar With Dropdown</h3>
  <p>Questo esempio aggiunge un menu a discesa nella barra di navigazione.</p>
</div>
</body>
</html>

NAVBAR FORM AND BUTTON

CODE

Copy to Clipboard

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>Navbar Forms</h3>
  <p>Puoi anche includere forms all'interno della barra di navigazione.</p>
</div>
</body>
</html>

FIXED NAVIGATION BAR

The navigation bar can also be pinned to the top or bottom of the page. A fixed navigation bar remains visible in a fixed position (top or bottom) regardless of page scrolling. The .fixed-top class makes the navigation bar fixed at the top:

Use the .fixed-bottom class to make the navigation bar stay at the bottom of the page:

Use the .sticky-top class to pin the navigation bar/stay at the top of the page when you scroll past it. Note: this class does not work in IE11 and earlier (it will treat it as position: relative).

LINKS TO PREVIOUS POST

BOOTSTRAP 5

LINK TO THE CODE ON GITHUB

GITHUB

NAVBAR

EXAMPLE OF NAVBAR BASIC CODE

VERTICAL NAVBAR

CENTER A NAVBAR

COLORS OF THE NAVBAR

CODE EXAMPLE

BRAND / LOGO

CODE EXAMPLE

NAVBAR TEXT

NAVBAR WITH DROP-DOWN

CODE EXAMPLE

NAVBAR FORM AND BUTTON

CODE

FIXED NAVIGATION BAR

LINKS TO PREVIOUS POST

LINK TO THE CODE ON GITHUB

About the Author: Marco Albasini

Leave A Comment Cancel reply

Categories

Archive

NAVBAR IN BOOTSTRAP FIVE