English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Dropdown Menu

When the user hovers over or clicks the trigger element, a dropdown menu is usually used to display a list of related links within the navigation title. You can use the Bootstrap dropdown plugin to add a toggleable dropdown menu to almost all content (such as links, buttons or button groups, navigation bars, tabs, and pill navigation, etc.) without writing any JavaScript code.

Bootstrap4 The dropdown menu depends on popper.min.js.

The dropdown menu is a toggleable menu that displays links in a list format.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Dropdown menu </h2>
　　<p>.dropdown class is used to specify a dropdown menu.</p>
　　<p>.dropdown-menu class to set the actual dropdown menu.</p>
　　<p>We can use a button or link to open the dropdown menu, button or link needs to add .dropdown-toggle and data-toggle="dropdown" attribute.</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Example analysis

.dropdown class is used to specify a dropdown menu.

We can use a button or link to open the dropdown menu, the button or link needs to add .dropdown-toggle and data-toggle="dropdown" attribute.

<div> element by adding .dropdown-menu class to set the actual dropdown menu, and then add .dropdown-item class.

We can also use in the <a> tag:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div class="dropdown">
	　　<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropdown link
	　　</a>
	　　<div　class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a　class="dropdown-item" href="#">Action</a>
		<a　class="dropdown-item" href="#">Another action</a>
		<a　class="dropdown-item" href="#">Something else here</a>
	　　</div>
	</div>
</div>
</body>
</html>
Test and see ‹/›

Separator in the dropdown menu

.dropdown-divider class is used to create a horizontal separator in the dropdown menu:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>in the dropdown menu</h2>
　　<p>.dropdown-divider class is used to create a horizontal separator in the dropdown menu: </p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　　　<div　class="dropdown-divider></div>
　　　　　　<a　class="dropdown-item" href="#">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

Title in the dropdown menu

.dropdown-header class is used to add a title in the dropdown menu:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>in the dropdown menu</h2>
　　<p>.dropdown-header class is used to add a title in the dropdown menu: </p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">Dropdown header</h5>
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　　　<h5　class="dropdown-header">Dropdown header</h5>
　　　　　　<a　class="dropdown-item" href="#">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

Available items and disabled items in the dropdown menu

.active class will highlight the dropdown menu options (adding a blue background).

If you want to disable the dropdown menu options, you can use the .disabled class.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Dropdown menu </h2>
　　<p>.active class will highlight the dropdown menu options (adding a blue background).</p>
　　<p> If you want to disable the options of the dropdown menu, you can use the .disabled class.</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item" href="#">Normal</a>
　　　　　　<a　class="dropdown-item active" href="#">Active</a>
　　　　　　<a　class="dropdown-item disabled" href="#">Disabled</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

Dropdown menu positioning

If we want the dropdown menu to be right-aligned, we can add the class .dropdown to the element on the-After adding .dropdown to the menu class-menu-right class.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Dropdown menu </h2>
　　<p> If we want the dropdown menu to be right-aligned, we can add the class .dropdown to the element on the-After adding .dropdown to the menu class-menu-right class.</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown button
　　　　</button>
　　　　<div　class="dropdown-menu dropdown-menu-right">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

Dropdown menu pop-out direction setting

The default direction for the dropdown menu to pop out is downwards, of course, we can also set different directions.

Specify the dropdown menu that pops out to the right

If you want the dropdown menu to pop out to the right, you can add the class "dropright" to the div element:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Dropdown menu </h2>
　　<p> The .dropright class is used to set the dropdown menu to pop out to the right: </p><br>
　　<!--　Default dropright button　-->
	<div　class="btn-group dropright">
	　　<button　type="button"　class="btn　btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropright
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Dropdown menu links　-->
		<a　class="dropdown-item" href="#">Action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Another action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Something else here</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">Separated link</a>
　　　　　　　　</div>
	</div>
	<!--　Split dropright button　-->
	<div　class="btn-group dropright">
	　　<button　type="button"　class="btn　btn-secondary">
		Split dropright
	　　</button>
	　　<button　type="button"　class="btn　btn-secondary dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropright</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Dropdown menu links　-->
		　<a　class="dropdown-item" href="#">Action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Another action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Something else here</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">Separated link</a>
	　　</div>
	</div>
</div>
</body>
</html>
Test and see ‹/›

Specify the upward pull-down menu that pops out

If you want the upward pull-down menu to pop out upwards, you can add the class "dropup" to the div element:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　　<h2Dropdown menu </h2>
　　　　<p> The .dropup class is used to set the dropdown menu to pop out upwards: </p><br><br><br><br><br><br><br><br>
　　<!--　Default dropup button　-->
　　　　<div　class="btn-group dropup">
　　　　<button　type="button"　class="btn　btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　Dropup
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　Dropdown menu links　-->
　　　　　　　　<a　class="dropdown-item" href="#">Action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Another action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Something else here</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">Separated link</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!--　Split dropup button　-->
　　　　<div　class="btn-group dropup">
　　　　<button　type="button"　class="btn　btn-secondary">
　　　　　　　　Split dropup
　　　　</button>
　　　　<button　type="button"　class="btn　btn-secondary dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　<span class="sr-only">Toggle Dropdown</span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　Dropdown menu links　-->
　　　　　　　　<a　class="dropdown-item" href="#">Action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Another action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Something else here</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">Separated link</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>
Test and see ‹/›

Specify the dropdown menu that pops out to the left

If you want the dropdown menu to pop out upwards, you can add the class "dropleft" to the div element:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="text-align:center;">
　　<h2Dropdown menu </h2>
　　<p> The .dropleft class is used to set the dropdown menu to pop out to the left: </p><br>
　　<!--　Default Dropleft Button　-->
	<div　class="btn-group Dropleft">
	　　<button　type="button"　class="btn　btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropleft
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Dropdown menu links　-->
		<a　class="dropdown-item" href="#">Action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Another action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Something else here</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">Separated link</a>
	　　</div>
	</div>
<br><br><br>
	<!--　Split Dropleft Button　-->
	<div　class="btn-group Dropleft">
	　　<button　type="button"　class="btn　btn-secondary">
		Split Dropleft
	　　</button>
	　　<button　type="button"　class="btn　btn-secondary dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropleft</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Dropdown menu links　-->
		<a　class="dropdown-item" href="#">Action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Another action</a>
　　　　　　　　<a　class="dropdown-item" href="#">Something else here</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">Separated link</a>
	　　</div>
	</div>
</div>
</body>
</html>
Test and see ‹/›

Set dropdown menu in the button

We can add a dropdown menu in the button:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Button dropdown in the button</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Primary</button>
　　　　<button　type="button"　class="btn　btn-primary dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-secondary">Secondary</button>
　　　　<button　type="button"　class="btn　btn-secondary dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-success">Success</button>
　　　　<button　type="button"　class="btn　btn-success dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-info">Info</button>
　　　　<button　type="button"　class="btn　btn-info　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-warning">Warning</button>
　　　　<button　type="button"　class="btn　btn-warning　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-danger">Danger</button>
　　　　<button　type="button"　class="btn　btn-danger　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Bootstrap4 CollapseBootstrap4 Card