70 - Componente : nav (con elementos de tipo dropdown)

Hemos visto que la componente "nav" nos permite definir una serie de hipervínculos. Ahora veremos que en lugar de alguno de esos hipervínculos podemos disponer una o más componentes de tipo "dropdown" que vimos en conceptos anteriores.

Recordemos que las componentes de tipo "dropdown" (listas desplegables) requieren el archivo de Javascript propuesto por Bootstrap 4.

Un ejemplo para ver la sintaxis de un menú horizontal con una opción de tipo "dropdown":

<!doctype html>
<html>

<head>
  <title>Prueba de Bootstrap 5</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>

<body>

  <div class="container">
    <ul class="nav mt-2">
      <li class="nav-item">
        <a class="nav-link" href="#">Opción 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">Opción 2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Buscadores</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="http://www.google.com">Google</a>
          <a class="dropdown-item" href="http://www.bing.com">Bing</a>
          <a class="dropdown-item" href="http://www.yahoo.com">Yahoo</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Opción 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Opción 5</a>
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
    crossorigin="anonymous"></script>
</body>

</html>

En el navegador tenemos el siguiente resultado:

bootstrap 5 nav drowpdown

Utilizamos la etiqueta HTML "ul":

    <ul class="nav mt-2">

Cada opción es un "li" con la clase "nav-item":

      <li class="nav-item">

Los enlaces agregan la clase "nav-link":

        <a class="nav-link" href="#">Opción 1</a>

El menú desplegable (dropdown) también es un "li" que le definimos las clases "nav-item" y "dropdown":

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Buscadores</a>        
        <div class="dropdown-menu">
          <a class="dropdown-item" href="http://www.google.com">Google</a>
          <a class="dropdown-item" href="http://www.bing.com">Bing</a>
          <a class="dropdown-item" href="http://www.yahoo.com">Yahoo</a>
        </div>
      </li>

Ejecutar Ejemplo

Retornar