Bootstrap 4 – Dropdowns

Bootstrap 4 cung cấp sẵn dropdown menus. Các JavaScript có sẵn trong Bootstrap JS, bạn chỉ cần sử dụng các class và style lại menu.

Dropdown menu

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Us</button>
      <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
      </div>
    </div>
  </div>

</body>

</html>

Trong đó class dropdown bao toàn bộ dropdown menu, nó có thuộc tính position: relative;

Thêm class dropdown-toggle và thuộc tính data-toggle=”dropdown” vào element để click mở ra menu, trong trường hợp này là button.

Một thẻ div với class dropdown-menu chứa toàn bộ item của menu.

Mỗi dropdown item được dùng với class dropdown-item.

Các thuộc tính aria-* như (aria-haspopup, aria-expanded,..) là các thuộc tính HTML5 nó không ảnh hưởng đến dropdown menu nên bạn có thể không cần quan tâm. Nó thường được dùng để gợi ý cho các thiết bị đọc.

Dropup Menu

Bạn thẻ tạo Dropup bằng cách đổi class dropdown thành dropup.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

  <!-- Add some space so the dropup menu doesn't disappear off the viewport -->
  <style scoped>
    .dropup {
      margin-top: 150px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="dropup">
      <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
      </button>
      <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
      </div>
    </div>
  </div>

</body>

</html>

Dropdown Position

Bạn có thể sử dụng class .dropright hay .dropleft cùng với dropdown để tạo menu mở sang trái hay phải

dropright

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="dropdown dropright">
      <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
      </button>
      <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
      </div>
    </div>
  </div>

</body>

</html>

dropleft

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="dropdown dropleft float-right">
      <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
      </button>
      <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
      </div>
    </div>
  </div>

</body>

</html>

Align Right

Thêm class .dropdown-menu-right vào .dropdown-menu để menu mở ra bên phải của button.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        This is a wide button to demonstrate the alignment
      </button>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
      </div>
    </div>
  </div>

</body>

</html>

Menu Headers

Bạn có thể tọa header cho dropdown menu bằng cách thêm class dropdown-header vào H1-H6.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
      </button>
      <div class="dropdown-menu" aria-labelledby="about-us">
        <h6 class="dropdown-header">Company Information</h6>
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <h6 class="dropdown-header">Contact Us</h6>
        <a class="dropdown-item" href="#">Call Center</a>
        <a class="dropdown-item" href="#">Store Locations</a>
      </div>
    </div>
  </div>

</body>

</html>

Dividers

Thêm .dropdown-divider vào để tạo một phần riêng biệt trong menu, phần này sẽ có 1 đường ngang mỏng chia cách với phần còn lại.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
      </button>
      <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Contact Us</a>
      </div>
    </div>
  </div>

</body>

</html>

Disabled Menu Items

Thêm thuộc tính disabled vào trong thẻ a sẽ Disable item menu đó.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
      </button>
      <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item disabled" href="#">Contact Us</a>
      </div>
    </div>
  </div>

</body>

</html>