Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Overview

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 an intentional design decision.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

If you’re building our JavaScript from source, it requires util.js .

Accessibility

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 role and aria- attributes required for true ARIA menus. Authors will have to include these more specific attributes themselves.

However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual .dropdown-item elements using the cursor keys and close the menu with the ESC key.

Examples

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown , or another element that declares position: relative; . Dropdowns can be triggered from or elements to better fit your potential needs.

Single button dropdowns

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either elements:

The best part is you can do this with any button variant, too:

Split button dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left 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.

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent element.

Dropright variation

Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.

Dropleft variation

Trigger dropdown menus at the left of the elements by adding .dropleft to the parent element.

Menu items

Historically dropdown menu contents had to be links, but that’s no longer the case with v4. Now you can optionally use elements in your dropdowns instead of just s.

Menu alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).

Menu headers

Add a header to label sections of actions in any dropdown menu.

Dropdown header

Menu dividers

Separate groups of related menu items with a divider.

Menu forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

Active menu items

Add .active to items in the dropdown to style them as active.

Disabled menu items

Add .disabled to items in the dropdown to style them as disabled.

Usage

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item. The data-toggle=»dropdown» attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.

On touch-enabled devices, opening a dropdown adds empty ( $.noop ) mouseover handlers to the immediate children of the element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, 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 mouseover handlers are removed.

Via data attributes

Add data-toggle=»dropdown» to a link or button to toggle a dropdown.

Via JavaScript

Call the dropdowns via JavaScript:

data-toggle=»dropdown» still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle=»dropdown» is always required to be present on the dropdown’s trigger element.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data- , as in data-offset=»» .

Name	Type	Default	Description
offset	number | string | function	0	Offset of the dropdown relative to its target. For more information refer to Popper.js’s offset docs.
flip	boolean	true	Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js’s flip docs.
boundary	string | element	‘scrollParent’	Overflow constraint boundary of the dropdown menu. Accepts the values of ‘viewport’ , ‘window’ , ‘scrollParent’ , or an HTMLElement reference (JavaScript only). For more information refer to Popper.js’s preventOverflow docs.

Note when boundary is set to any value other than ‘scrollParent’ , the style position: static is applied to the .dropdown container.

Methods

Method	Description
$().dropdown(‘toggle’)	Toggles the dropdown menu of a given navbar or tabbed navigation.
$().dropdown(‘update’)	Updates the position of an element’s dropdown.
$().dropdown(‘dispose’)	Destroys an element’s dropdown.

Events

All dropdown events are fired at the .dropdown-menu ’s parent element and have a relatedTarget property, whose value is the toggling anchor element.

Компоненты

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Выпадающие меню

Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.

Содержание

Примеры

Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown , или другой элемент, который заявляет, position: relative; . Раскрывающиеся списки могут быть вызваны из или элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

Одиночная кнопка выпадающего меню

Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с элементы:

Самое приятное, что вы можете сделать это с любым вариантом кнопки:

Split кнопка с выпадающим меню

Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением .dropdown-toggle-split для правильного шрифта выпадающего каре.

Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left , который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

Изменение размера

Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.

Вариант списка сверху

Вызвать выпадающее меню над элементами, добавив .dropup для родительского элемента.

Пункты меню

Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать элементы в раскрывающихся списках, а не просто ы.

Выравнивание меню

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.

Заголовки меню

Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.

Dropdown header

Делители меню

Отдельные группы связанных элементов меню с делителем.

Заблокированы части меню

Добавить .disabled для пунктов в раскрывающемся меню стиль их как отключенные.

Использование

Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.

На мобильных устройствах, открывая выпадающий добавляет .dropdown-backdrop как площадь нажатия для закрытия выпадающего меню При нажатии за меню требование для правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.

Примечание: data-toggle=»dropdown» атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.

С помощью данных атрибутов

Добавить data-toggle=»dropdown» на ссылку или кнопку для переключения в меню.

Через JavaScript

Вызвать меню через JavaScript:

data-toggle=»dropdown» еще требуется

Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle=»dropdown» всегда должно присутствовать на спусковом элементе раскрывающегося меню.

Варианты

Методы

Способ	Описание
$().dropdown(‘toggle’)	Переключает меню данной панели навигации и вкладок навигации.

События

Все выпадающие события обстреляли .dropdown-menu ’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.

Событие	Описание
show.bs.dropdown	Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется.
shown.bs.dropdown	Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения).
hide.bs.dropdown	Это событие немедленно уволили, когда скрывать метод экземпляра называется.
hidden.bs.dropdown	Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения).

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.

Создание выпадающего (drop-down) меню при помощи только CSS

Сразу говорю, здесь мы не будем рассматривать меню с различными эффектами на jQuery (типо выпадания, выдвижения и прочее).

Только CSS и HTML, невероятно, но этого вполне достаточно для создания весьма неплохих менюшек.

Пока что я покажу вам только как сделать менюшку с одним уровнем вложенности, в данном случае главное — уловить саму суть.

Пунктов может быть сколько угодно, выпадающих списков тоже, просто создаёте их по шаблону, подставляя лишь вместо символов # свои ссылки.

Здесь тоже всё довольно просто, к тому же часть кода ниже я использовал чисто для оформления, свой цвет фона, цвет ссылок и прочее (важное отмечено /* (!) */ ).

Аналогично можно добавлять ещё больше уровней вложенности, вставляя

в

Повторяюсь, зеленым цветом я отметил стили, которые необходимы для того, чтобы меню нормально работало (выпадало).

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

How TO — Hoverable Dropdown

Learn how to create a hoverable dropdown menu with CSS.

Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create A Hoverable Dropdown

Create a dropdown menu that appears when the user moves the mouse over an element.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

Use a container element (like

Step 2) Add CSS:

Example

/* Dropdown Button */
.dropbtn <
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

— needed to position the dropdown content */
.dropdown <
position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn

Example Explained

We have styled the dropdown button with a background-color, padding, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.