mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-13 01:08:58 +01:00
1317 lines
86 KiB
HTML
1317 lines
86 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||
<meta name="generator" content="Jekyll v3.7.0">
|
||
|
||
<title>Dropdowns · Bootstrap</title>
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
|
||
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||
|
||
|
||
<!-- Documentation extras -->
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||
|
||
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||
<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||
<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||
<link rel="manifest" href="/assets/img/favicons/manifest.json">
|
||
<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
|
||
<meta name="theme-color" content="#563d7c">
|
||
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:site" content="@getbootstrap">
|
||
<meta name="twitter:creator" content="@getbootstrap">
|
||
<meta name="twitter:title" content="Dropdowns">
|
||
<meta name="twitter:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
|
||
|
||
<!-- Facebook -->
|
||
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/dropdowns/">
|
||
<meta property="og:title" content="Dropdowns">
|
||
<meta property="og:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:type" content="image/png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
|
||
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
|
||
</head>
|
||
<body>
|
||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||
<div class="container">
|
||
<span class="skiplink-text">Skip to main content</span>
|
||
</div>
|
||
</a>
|
||
|
||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
|
||
</a>
|
||
|
||
<div class="navbar-nav-scroll">
|
||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="/docs/4.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://jobs.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
v4.0
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item" href="/docs/4.1/">Latest (v4.1.x)</a>
|
||
<a class="dropdown-item active" href="/docs/4.0/">v4.0.0</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row flex-xl-nowrap">
|
||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||
<form class="bd-search d-flex align-items-center">
|
||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
|
||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
|
||
</button>
|
||
</form>
|
||
|
||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/getting-started/introduction/">
|
||
Getting started
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/getting-started/introduction/">
|
||
Introduction
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/download/">
|
||
Download
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/contents/">
|
||
Contents
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/browsers-devices/">
|
||
Browsers & devices
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/javascript/">
|
||
JavaScript
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/theming/">
|
||
Theming
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/build-tools/">
|
||
Build tools
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/webpack/">
|
||
Webpack
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/accessibility/">
|
||
Accessibility
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
|
||
Layout
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/layout/overview/">
|
||
Overview
|
||
</a></li><li>
|
||
<a href="/docs/4.0/layout/grid/">
|
||
Grid
|
||
</a></li><li>
|
||
<a href="/docs/4.0/layout/media-object/">
|
||
Media object
|
||
</a></li><li>
|
||
<a href="/docs/4.0/layout/utilities-for-layout/">
|
||
Utilities for layout
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
|
||
Content
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/content/reboot/">
|
||
Reboot
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/typography/">
|
||
Typography
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/code/">
|
||
Code
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/images/">
|
||
Images
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/tables/">
|
||
Tables
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/figures/">
|
||
Figures
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
|
||
Components
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/components/alerts/">
|
||
Alerts
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/badge/">
|
||
Badge
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/breadcrumb/">
|
||
Breadcrumb
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/buttons/">
|
||
Buttons
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/button-group/">
|
||
Button group
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/card/">
|
||
Card
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/carousel/">
|
||
Carousel
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/collapse/">
|
||
Collapse
|
||
</a></li><li class="active bd-sidenav-active">
|
||
<a href="/docs/4.0/components/dropdowns/">
|
||
Dropdowns
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/forms/">
|
||
Forms
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/input-group/">
|
||
Input group
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/jumbotron/">
|
||
Jumbotron
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/list-group/">
|
||
List group
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/modal/">
|
||
Modal
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/navs/">
|
||
Navs
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/navbar/">
|
||
Navbar
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/pagination/">
|
||
Pagination
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/popovers/">
|
||
Popovers
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/progress/">
|
||
Progress
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/scrollspy/">
|
||
Scrollspy
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/tooltips/">
|
||
Tooltips
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
|
||
Utilities
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/utilities/borders/">
|
||
Borders
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/clearfix/">
|
||
Clearfix
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/close-icon/">
|
||
Close icon
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/colors/">
|
||
Colors
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/display/">
|
||
Display
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/embed/">
|
||
Embed
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/flex/">
|
||
Flex
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/float/">
|
||
Float
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/image-replacement/">
|
||
Image replacement
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/position/">
|
||
Position
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/screenreaders/">
|
||
Screenreaders
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/sizing/">
|
||
Sizing
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/spacing/">
|
||
Spacing
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/text/">
|
||
Text
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/vertical-align/">
|
||
Vertical align
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/visibility/">
|
||
Visibility
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||
Extend
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/extend/approach/">
|
||
Approach
|
||
</a></li><li>
|
||
<a href="/docs/4.0/extend/icons/">
|
||
Icons
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/migration/">
|
||
Migration
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
|
||
About
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/about/overview/">
|
||
Overview
|
||
</a></li><li>
|
||
<a href="/docs/4.0/about/brand/">
|
||
Brand
|
||
</a></li><li>
|
||
<a href="/docs/4.0/about/license/">
|
||
License
|
||
</a></li><li>
|
||
<a href="/docs/4.0/about/translations/">
|
||
Translations
|
||
</a></li></ul>
|
||
</div></nav>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||
<ul class="section-nav">
|
||
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#single-button-dropdowns">Single button dropdowns</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#split-button-dropdowns">Split button dropdowns</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#dropup-variation">Dropup variation</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#dropright-variation">Dropright variation</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#dropleft-variation">Dropleft variation</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#menu-items">Menu items</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#menu-alignment">Menu alignment</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#menu-headers">Menu headers</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#menu-dividers">Menu dividers</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#menu-forms">Menu forms</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#active-menu-items">Active menu items</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#disabled-menu-items">Disabled menu items</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#options">Options</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||
<h1 class="bd-title" id="content">Dropdowns</h1>
|
||
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
|
||
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||
|
||
<h2 id="overview">Overview</h2>
|
||
|
||
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision.</a></p>
|
||
|
||
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper.js</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
|
||
|
||
<p>If you’re building our JavaScript from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
|
||
|
||
<h2 id="accessibility">Accessibility</h2>
|
||
|
||
<p>The <a href="https://www.w3.org/TR/wai-aria/"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> standard defines an actual <a href="https://www.w3.org/TR/wai-aria/roles#menu"><code class="highlighter-rouge">role="menu"</code> widget</a>, but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.</p>
|
||
|
||
<p>Bootstrap’s dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the <code class="highlighter-rouge">role</code> and <code class="highlighter-rouge">aria-</code> attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.</p>
|
||
|
||
<p>However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual <code class="highlighter-rouge">.dropdown-item</code> elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.</p>
|
||
|
||
<h2 id="examples">Examples</h2>
|
||
|
||
<p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code class="highlighter-rouge">.dropdown</code>, or another element that declares <code class="highlighter-rouge">position: relative;</code>. Dropdowns can be triggered from <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><button></code> elements to better fit your potential needs.</p>
|
||
|
||
<h3 id="single-button-dropdowns">Single button dropdowns</h3>
|
||
|
||
<p>Any single <code class="highlighter-rouge">.btn</code> can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <code class="highlighter-rouge"><button></code> elements:</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown button
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||
<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>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Dropdown button
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<p>And with <code class="highlighter-rouge"><a></code> elements:</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="dropdown show">
|
||
<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>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown show"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenuLink"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Dropdown link
|
||
<span class="nt"></a></span>
|
||
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuLink"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<p>The best part is you can do this with any button variant, too:</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
</div>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Example single danger button --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Action
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<h3 id="split-button-dropdowns">Split button dropdowns</h3>
|
||
|
||
<p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code class="highlighter-rouge">.dropdown-toggle-split</code> for proper spacing around the dropdown caret.</p>
|
||
|
||
<p>We use this extra class to reduce the horizontal <code class="highlighter-rouge">padding</code> on either side of the caret by 25% and remove the <code class="highlighter-rouge">margin-left</code> that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.</p>
|
||
|
||
<div class="bd-example">
|
||
<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" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<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" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<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" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<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" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<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" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<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" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
</div>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Example split danger button --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<h2 id="sizing">Sizing</h2>
|
||
|
||
<p>Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Large button
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<div class="btn-group ml-2">
|
||
<button type="button" class="btn btn-lg btn-secondary">Large split button</button>
|
||
<button type="button" class="btn btn-lg 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">
|
||
<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><!-- /btn-group -->
|
||
</div><!-- /btn-toolbar -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Small button
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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><!-- /btn-group -->
|
||
<div class="btn-group ml-2">
|
||
<button type="button" class="btn btn-sm btn-secondary">Small split button</button>
|
||
<button type="button" class="btn btn-sm 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">
|
||
<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><!-- /btn-group -->
|
||
</div><!-- /btn-toolbar -->
|
||
</div>
|
||
<!-- /example -->
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Large button groups (default and split) --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Large button
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
...
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>
|
||
Large split button
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
...
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
|
||
<span class="c"><!-- Small button groups (default and split) --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Small button
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
...
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>
|
||
Small split button
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
...
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<h2 id="dropup-variation">Dropup variation</h2>
|
||
|
||
<p>Trigger dropdown menus above elements by adding <code class="highlighter-rouge">.dropup</code> to the parent element.</p>
|
||
|
||
<div class="bd-example">
|
||
<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">
|
||
<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 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">
|
||
<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>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Default dropup button --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropup"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Dropup
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="c"><!-- Dropdown menu links --></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
|
||
<span class="c"><!-- Split dropup button --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropup"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||
Split dropup
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="c"><!-- Dropdown menu links --></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<h2 id="dropright-variation">Dropright variation</h2>
|
||
|
||
<p>Trigger dropdown menus at the right of the elements by adding <code class="highlighter-rouge">.dropright</code> to the parent element.</p>
|
||
|
||
<div class="bd-example">
|
||
<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">
|
||
<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 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 Dropdright</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<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>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Default dropright button --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropright"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Dropright
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="c"><!-- Dropdown menu links --></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
|
||
<span class="c"><!-- Split dropright button --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropright"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||
Split dropright
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropright<span class="nt"></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="c"><!-- Dropdown menu links --></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<h2 id="dropleft-variation">Dropleft variation</h2>
|
||
|
||
<p>Trigger dropdown menus at the left of the elements by adding <code class="highlighter-rouge">.dropleft</code> to the parent element.</p>
|
||
|
||
<div class="bd-example">
|
||
<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">
|
||
<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 class="btn-group">
|
||
<div class="btn-group dropleft" role="group">
|
||
<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">
|
||
<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>
|
||
<button type="button" class="btn btn-secondary">
|
||
Split dropleft
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Default dropleft button --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropleft"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Dropleft
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="c"><!-- Dropdown menu links --></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
|
||
<span class="c"><!-- Split dropleft button --></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropleft"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropleft<span class="nt"></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="c"><!-- Dropdown menu links --></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||
Split dropleft
|
||
<span class="nt"></button></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<h2 id="menu-items">Menu items</h2>
|
||
|
||
<p>Historically dropdown menu contents <em>had</em> to be links, but that’s no longer the case with v4. Now you can optionally use <code class="highlighter-rouge"><button></code> elements in your dropdowns instead of just <code class="highlighter-rouge"><a></code>s.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||
<button class="dropdown-item" type="button">Action</button>
|
||
<button class="dropdown-item" type="button">Another action</button>
|
||
<button class="dropdown-item" type="button">Something else here</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenu2"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Dropdown
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu2"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Another action<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Something else here<span class="nt"></button></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="menu-alignment">Menu alignment</h2>
|
||
|
||
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code class="highlighter-rouge">.dropdown-menu-right</code> to a <code class="highlighter-rouge">.dropdown-menu</code> to right align the dropdown menu.</p>
|
||
|
||
<div class="bd-callout bd-callout-info">
|
||
<p><strong>Heads up!</strong> Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).</p>
|
||
</div>
|
||
|
||
<div class="bd-example">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Right-aligned menu
|
||
</button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<button class="dropdown-item" type="button">Action</button>
|
||
<button class="dropdown-item" type="button">Another action</button>
|
||
<button class="dropdown-item" type="button">Something else here</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Right-aligned menu
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Another action<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Something else here<span class="nt"></button></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="menu-headers">Menu headers</h2>
|
||
|
||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="dropdown-menu">
|
||
<h6 class="dropdown-header">Dropdown header</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"dropdown-header"</span><span class="nt">></span>Dropdown header<span class="nt"></h6></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="menu-dividers">Menu dividers</h2>
|
||
|
||
<p>Separate groups of related menu items with a divider.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="dropdown-menu">
|
||
<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 class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="menu-forms">Menu forms</h2>
|
||
|
||
<p>Put a form within a dropdown menu, or make it into a dropdown menu, and use <a href="/docs/4.0/utilities/spacing/">margin or padding utilities</a> to give it the negative space you require.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="dropdown-menu">
|
||
<form class="px-4 py-3">
|
||
<div class="form-group">
|
||
<label for="exampleDropdownFormEmail1">Email address</label>
|
||
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleDropdownFormPassword1">Password</label>
|
||
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" />
|
||
</div>
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="dropdownCheck" />
|
||
<label class="form-check-label" for="dropdownCheck">
|
||
Remember me
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||
</form>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">New around here? Sign up</a>
|
||
<a class="dropdown-item" href="#">Forgot password?</a>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"px-4 py-3"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleDropdownFormEmail1"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormEmail1"</span> <span class="na">placeholder=</span><span class="s">"email@example.com"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleDropdownFormPassword1"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">id=</span><span class="s">"dropdownCheck"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"dropdownCheck"</span><span class="nt">></span>
|
||
Remember me
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>New around here? Sign up<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Forgot password?<span class="nt"></a></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-example">
|
||
<form class="dropdown-menu p-4">
|
||
<div class="form-group">
|
||
<label for="exampleDropdownFormEmail2">Email address</label>
|
||
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleDropdownFormPassword2">Password</label>
|
||
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password" />
|
||
</div>
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="dropdownCheck2" />
|
||
<label class="form-check-label" for="dropdownCheck2">
|
||
Remember me
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||
</form>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"dropdown-menu p-4"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleDropdownFormEmail2"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormEmail2"</span> <span class="na">placeholder=</span><span class="s">"email@example.com"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleDropdownFormPassword2"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormPassword2"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">id=</span><span class="s">"dropdownCheck2"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"dropdownCheck2"</span><span class="nt">></span>
|
||
Remember me
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||
<span class="nt"></form></span></code></pre></div>
|
||
|
||
<h2 id="active-menu-items">Active menu items</h2>
|
||
|
||
<p>Add <code class="highlighter-rouge">.active</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Regular link</a>
|
||
<a class="dropdown-item active" href="#">Active link</a>
|
||
<a class="dropdown-item" href="#">Another link</a>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Regular link<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active link<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another link<span class="nt"></a></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="disabled-menu-items">Disabled menu items</h2>
|
||
|
||
<p>Add <code class="highlighter-rouge">.disabled</code> to items in the dropdown to <strong>style them as disabled</strong>.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Regular link</a>
|
||
<a class="dropdown-item disabled" href="#">Disabled link</a>
|
||
<a class="dropdown-item" href="#">Another link</a>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Regular link<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled link<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another link<span class="nt"></a></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="usage">Usage</h2>
|
||
|
||
<p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code class="highlighter-rouge">.show</code> class on the parent list item. The <code class="highlighter-rouge">data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.</p>
|
||
|
||
<div class="bd-callout bd-callout-info">
|
||
<p>On touch-enabled devices, opening a dropdown adds empty (<code class="highlighter-rouge">$.noop</code>) <code class="highlighter-rouge">mouseover</code> handlers to the immediate children of the <code class="highlighter-rouge"><body></code> element. This admittedly ugly hack is necessary to work around a <a href="https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html">quirk in iOS’ event delegation</a>, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty <code class="highlighter-rouge">mouseover</code> handlers are removed.</p>
|
||
</div>
|
||
|
||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||
|
||
<p>Add <code class="highlighter-rouge">data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Dropdown trigger
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dLabel"</span><span class="nt">></span>
|
||
...
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<h3 id="via-javascript">Via JavaScript</h3>
|
||
|
||
<p>Call the dropdowns via JavaScript:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.dropdown-toggle'</span><span class="p">).</span><span class="nx">dropdown</span><span class="p">()</span></code></pre></figure>
|
||
|
||
<div class="bd-callout bd-callout-info">
|
||
<h5 id="data-toggledropdown-still-required"><code class="highlighter-rouge">data-toggle="dropdown"</code> still required</h5>
|
||
|
||
<p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code class="highlighter-rouge">data-toggle="dropdown"</code> is always required to be present on the dropdown’s trigger element.</p>
|
||
</div>
|
||
|
||
<h3 id="options">Options</h3>
|
||
|
||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p>
|
||
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">Name</th>
|
||
<th style="width: 100px;">Type</th>
|
||
<th style="width: 50px;">Default</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>offset</td>
|
||
<td>number | string | function</td>
|
||
<td>0</td>
|
||
<td>Offset of the dropdown relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>flip</td>
|
||
<td>boolean</td>
|
||
<td>true</td>
|
||
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.enabled">flip docs</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>boundary</td>
|
||
<td>string | element</td>
|
||
<td>'scrollParent'</td>
|
||
<td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p>Note when <code class="highlighter-rouge">boundary</code> is set to any value other than <code class="highlighter-rouge">'scrollParent'</code>, the style <code class="highlighter-rouge">position: static</code> is applied to the <code class="highlighter-rouge">.dropdown</code> container.</p>
|
||
|
||
<h3 id="methods">Methods</h3>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Method</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$().dropdown('toggle')</code></td>
|
||
<td>Toggles the dropdown menu of a given navbar or tabbed navigation.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$().dropdown('update')</code></td>
|
||
<td>Updates the position of an element’s dropdown.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$().dropdown('dispose')</code></td>
|
||
<td>Destroys an element’s dropdown.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3 id="events">Events</h3>
|
||
|
||
<p>All dropdown events are fired at the <code class="highlighter-rouge">.dropdown-menu</code>’s parent element and have a <code class="highlighter-rouge">relatedTarget</code> property, whose value is the toggling anchor element.</p>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Event</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">show.bs.dropdown</code></td>
|
||
<td>This event fires immediately when the show instance method is called.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">shown.bs.dropdown</code></td>
|
||
<td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">hide.bs.dropdown</code></td>
|
||
<td>This event is fired immediately when the hide instance method has been called.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">hidden.bs.dropdown</code></td>
|
||
<td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myDropdown'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.dropdown'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||
<span class="c1">// do something…</span>
|
||
<span class="p">})</span></code></pre></figure>
|
||
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||
<script>window.jQuery || document.write('<script src="/docs/4.0/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||
|
||
<script src="/docs/4.0/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/docs/4.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.0/assets/js/docs.min.js"></script>
|
||
</body>
|
||
</html>
|