Introduction to Bootstrap Dropdowns And Bootstrap Collapse [Bootstrap Tutorial: Part I]

At the heart of modern web design lies the art of displaying just the right-to-the-point information at the right moment. As users explore a website, presenting them with an overwhelming flow of content can lead to disengagement and frustration. However, when you show data as of when the users need it, they will likely stay on the website longer due to the pleasant user experience.

At the same time, you do not want the users to be overwhelmed with a lot of information on the website. Using the right set of components (e.g., dropdowns, buttons, text boxes, text areas, etc.) can help combat the menace of information overload. Dropdowns and collapse components allow you to neatly organize information and allow users to access specific details when they need them the most.

By keeping lesser-used options hidden until requested, dropdowns and collapse components maintain a clean and clutter-free interface, enhancing user focus and overall satisfaction. And this is one of the reasons why dropdowns are in use on different websites like eCommerce, OTA, etc., such as eBay and Expedia, for features like FAQs and user preferences.

For instance, LambdaTest lists the FAQ for its products (e.g., HyperExecute) in a subtle drop-down list to provide better readability & ease of navigation.

The below example shows how Apple uses a nested dropdown on a MacBook’s Finder app for performing different tasks on selected items. Sorting folders and files isn’t an action a user will do regularly. However, it is a crucial enough task that needs to be somewhere easily accessible when needed, and this is where a dropdown came to the rescue.

In this Bootstrap tutorial Part I, we will delve into the inner workings of Bootstrap dropdowns and Bootstrap collapse components. You will learn how to use them to enclose periodically used content and render it when required to create a uniform user experience on your website.

Bootstrap Dropdowns and Collapse: An Overview

Before we get into the nitty gritty of Bootstrap dropdowns and Bootstrap collapse, let me give you an overview of these Bootstrap features so that you get a better picture of what we are about to explore.

Bootstrap Dropdowns

Bootstrap dropdowns are toggleable overlays or floats that can render a list of links, buttons, forms, or any other information. They have click-based user interaction. The dropdown consists of a trigger (toggler) and a dropdown menu that shows up when you click the trigger.

Bootstrap provides several classes and attributes for styling and controlling the behavior of the dropdowns. The classes enrich your dropdowns with features such as headers and dividers. Dropdowns in Bootstrap have a click-based user interaction.

The classes and attributes include

• dropdown
• dropdown-item
• data-bs-auto-close
• drop-up
• dropdown-header
• drop-up

As of writing this tutorial on Bootstrap dropdowns and Bootstrap collapse, Bootstrap v5.3 uses the PopperJS library to add interactivity to the dropdowns.

Bootstrap Collapse

Bootstrap’s collapse plugin enables you to hide and show content. It uses buttons or anchors as triggers that map to the content sections you want to toggle. Bootstrap also provides classes like collapse to hide content and show to show the content. The plugin allows both horizontal and vertical collapsing.

Users can click the trigger (button or anchor) to expand or collapse the content section. There is an animation during the expansion and collapse.

Applications of Bootstrap Dropdowns and Collapse

Dropdowns and collapsible content find use in various areas of modern web design. Below, we’ll explore applications of Bootstrap dropdowns and collapse where they are used and why.

Responsive Menus and Layouts

We typically use dropdown menus and collapse components to offer responsive features to website users, particularly on mobile devices. These components show and hide navigation options under a menu icon, enhancing the user experience and optimizing screen space.

Forms

Forms, one of the usual components of a website, usually have a dropdown as a feature that renders a set of predefined choices. The dropdowns are handy for information on a form with a fixed set of options, such as a state, region, or language.

The above image shows a dropdown of a predefined set of options in LambdaTest’s Schedule Your Personal Demo form.

Accordions

We frequently utilize collapsible content in accordion-style components. Accordions let users expand or collapse content sections, showing or hiding additional sections/subsections.

Trending examples of the use of accordions include FAQs and product descriptions.

Source

The above example shows how Netflix uses collapsible content in its FAQs accordions. This feature enables users to quickly pick the desired question as it doesn’t bombard them with all the questions and their answers.

It also saves screen space by putting several FAQs in the same place without overcrowding.

Filters and Search Results

Filtering and sorting data is another application of Bootstrap dropdowns, especially in eCommerce and remote jobs websites. Users can pick specific criteria from dropdowns to polish search results, filter data by category, or sort data with different parameters like location.

As shown above, Google uses a dropdown to enable users to filter and optimize search results.

Source

In the above example of Remote OK, users can use dropdown options to optimize and filter data results using parameters like location, salary, and benefits for a particular job search.

User Preferences

User preferences are a common area where Bootstrap dropdowns are in use. Users can access a dropdown with all the setting preferences for their accounts when they click on their profile image or name. The Bootstrap dropdowns provide a better user experience and save screen space.

Source

Shown above is an example of how eBay uses a dropdown to enable users to change their preferences like Bids/Offers. It is right there for the users to change their profile or view their purchase history when they require the same.

Use Cases of Bootstrap Dropdowns

Bootstrap dropdowns are toggle-able features that we usually use to display a list of options or pieces of text. They help us create multi-level menus and save screen real estate.

To interact with dropdowns, users can click or hover on them. Bootstrap dropdowns are click-based by default.

The example below shows how Payoneer maximizes the available space to still offer all its services to mobile device users by making the menu multi-level using dropdowns.

Creating a Bootstrap Dropdown Using Button and Anchor Elements

You can turn any button or anchor into a dropdown by wrapping them and the dropdown menu in the dropdown class, with the button being the recommended choice.

Code:

Browser output:

The above browser output shows a button and anchor dropdown. The toggles (button and anchor) should have the attribute data-bs-toggle with its value set to dropdown. For the basic styling of your dropdown items, you can wrap them in a dropdown-item class.

See the Pen
Bootstrap CSS dropdowns – Single button by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Creating Bootstrap Dropdowns With Split Buttons

You can create Bootstrap dropdowns with split buttons by adding the class dropdown-toggle-split to the toggle button or anchor.

Code:

Browser output:

 

See the Pen
Bootstrap CSS dropdowns – Split button by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Dropdown Dividers

Dropdown dividers separate groups of related content or items in the dropdown menu. They help in the visual organization of dropdown menus by breaking the items into digestible sections.

We can also use dividers to help users determine which dropdown menu content is actionable such as buttons and links, or information.

In the first of two examples below, the JUMIA website uses a divider to separate informational dropdown menu items from the actionable option button of LIVE HELP.

Source

The second example shows how the BuiltWith website uses dividers to turn dropdown menu items into absorbable sections.

Source

To create a divider, create a < li > with the class divider and add an < hr > inside it.

Code:

Browser output:

 

See the Pen
Bootstrap CSS dropdowns – dropdown dividers by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Dropdown Offsets

Dropdown offsets define the location of the dropdown menu. You can also think of it as defining the distance between the dropdown toggle and the dropdown menu. Bootstrap dropdowns can have a horizontal offset, a vertical offset, or both.

To create an offset, define a data-bs-offset attribute on the dropdown toggle, and populate it. The attribute takes in two values, one for the horizontal offset and another for the vertical.

Code:

Browser output:

 

The browser output above shows the four dropdowns with different offsets. To set only the horizontal offset, the value for the vertical offset should be 0, and the reverse is true.

See the Pen
Bootstrap CSS dropdowns – dropdown offsets by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Dropdown Headers

Dropdown headers act as labels or identifiers for sections and groups of items in the dropdown menu. They help users identify related dropdown items, thus saving time and making decision-making easier.

In the below example, Wikipedia uses the dropdown header of Print/export as a label for dropdown items relating to printing or downloading the page as a document. It saves users the precious time of looking through the entire list to identify them.

Source

Code:

Browser output:

The above browser output features a dropdown with the name Learning hub. The dropdown has two sections, one for Tutorials and another for Products. We have used dropdown headers to indicate each section.

See the Pen
Bootstrap CSS Dropdowns – Dropdown headers by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Dropdown Forms

With Bootstrap dropdown forms, you can put forms inside a dropdown menu and style them.

Code:

Browser output:

 

See the Pen
Bootstrap CSS Dropdowns – Dropdown forms by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Dropdown Auto Close Behavior

Dropdown menu closes when the user clicks inside or outside them by default. You can, however, change this behavior by using the attribute data-bs-auto-close attribute.

The below example shows you how you can achieve this through auto-close behavior.

Code:

Browser output:

The data-bs-auto-close attribute takes in four values:

• true
• false
• inside
• outside

The above browser output shows four dropdowns; the first is the default dropdown where the attribute’s value is true, and the value is set to inside outside, , and false for the second, third, and last dropdowns.

See the Pen
Bootstrap CSS Dropdowns – Dropdown auto-close behavior by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Changing the Direction of Dropdowns

Bootstrap allows you to change the direction of the dropdown from the default to several others. These include:

• centered
• dropup
• dropend
• dropstart

Centered

To center your dropdown menu directly under the dropdown toggle or trigger, define the dropdown-center class on the trigger.

Code:

Browser output:

The above browser output shows the difference between the normal and centered dropdown menus. While the normal dropdown has its menu aligned following the start of the trigger, the centered dropdown has its menu directly centered under it.

See the Pen
Bootstrap CSS Dropdowns – Dropdown direction by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Dropup

A dropup appears at the top of its trigger rather than down. To create a dropup, define the class on the dropdown menu parent element. Dropups are usually used when there is limited or no space for a dropdown to occupy.

Code:

Browser output:

See the Pen
Bootstrap CSS Dropdowns – Dropup by Mbaziira Ronald (@mbaziraofug)
on CodePen.

The below example shows how Trello uses a dropup for its dropdown menu for choosing the user’s country and language in the footer.

Source

Eventbrite also uses a dropup for the user’s country and language selection in the footer.

Source

Dropstart

A dropstart menu appears at the left end of the dropdown trigger. To create a dropstart, define the class dropstart on the parent element of the dropdown menu.

Code:

Browser output:

See the Pen
Bootstrap CSS Dropdowns – Dropstart by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Dropend

A dropend menu appears at the right end of the dropdown trigger. To create a dropend, define the class dropend on the parent element of the dropdown menu.

Code:

Browser output:

See the Pen
Bootstrap CSS Dropdowns – Dropend by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Use Cases of Bootstrap Collapse

Bootstrap collapse allows website users to visually show (or hide) the content on a webpage. It can simplify complex interfaces by offering information only when needed, thus reducing clutter or overwhelming users with information overload. Furthermore, they can increase the website’s load time since content is loaded and rendered when required.

Expedia uses a collapsible feature to offer information to its users on items like Flights and Hotels only when they need it.

Source

Bootstrap uses buttons and anchors as triggers to toggle content. The buttons and anchors are required to have the attribute data-bs-toggle=”collapse” Toggling the content is done by animating the content’s height from its current value to 0 and vice versa when you click the trigger.

NGINX uses the same collapsible feature on its dropdown for languages below with a visually pleasing smooth animation.

Source

Code:

Browser output:

The triggers are supplied with a class collapse which hides or shows content when clicked. For anchors, the value for the href attribute should match the value of the id attribute for the content to be collapsed, and for the button, it should match the value in the data-bs-target attribute.

See the Pen
Bootstrap CSS Toggles – Toggling content by Mbaziira Ronald (@mbaziraofug)
on CodePen.

The toggles can collapse different content on the same page. You can do this by giving the content unique ids that the toggles will target.

Code:

Browser output:

To make toggles collapse different content, match the ids of the content to collapse to match that of the data-bs-target or href attributes of the toggles.

See the Pen
Bootstrap CSS toggles – Toggling content with different ids by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Toggling Content Horizontally

Similarly to toggling content vertically, you can also toggle content horizontally. Bootstrap does this by animating the current value of the width of the content to 0 and vice-versa.

Code:

Browser output:

See the Pen
Bootstrap CSS Toggles – Toggling content horizontally by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Handling Multiple Toggles and Targets

Buttons and anchors can simultaneously manage multiple targets by referencing them in their data-bs-target and href attributes.

Code:

Browser output:

In the above preview, the toggle on the left handles only one target, while the toggle on the right handles two targets it references in its data-bs-target attribute.

See the Pen
Bootstrap CSS Toggles – Handling multiple toggles and targets by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Combining Bootstrap Dropdowns and Bootstrap Collapse

You can combine the Bootstrap dropdown and Bootstrap collapse components to create features that offer a unique user experience to website visitors. Let’s look at some of the features you can make by combining the Bootstrap dropdowns and Bootstrap collapse components.

Cascading Dropdowns

Cascading dropdowns are a series of dependent dropdowns in which the selection of one dropdown depends on the selection made in the parent or previous dropdowns. These dropdowns are usually catering to make hierarchical data more organized and user-friendly.

You can combine multiple dropdowns, each behaving as a filter for the following one, and where the selected options in each dropdown display or update the content in a collapsible section on the fly.

Collapse Panel With Nested Dropdown

You can create a collapsed panel containing any information you want the user to view, and where applicable, you can nest it within a dropdown. You can typically leverage it for collapsible panels of FAQs.

Nested Dropdown Navigation

You can nest dropdowns within each other for related hierarchical content. You will see this commonly with nested menu dropdowns. Mastercard uses a nested dropdown menu on small screen devices to enable users to navigate and access all the menu options easily without affecting user experience.

Here is an example of Mateusz Bieniaszczyk’s aesthetically pleasing Dribble creation.

Source

The below browser output shows a collapse panel with a nested dropdown form created for one of our FAQs.

See the Pen
Bootstrap dropdown nested in collapse panel by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Advanced Tricks: Combining Dropdowns and Collapse

Let’s now look at the advanced CSS tricks that will help you ensure consistency, readability, proper maintenance, and seamless integration of your Bootstrap dropdown and Bootstrap collapse features.

Ensure Responsiveness and Compatibility

Earlier on, we saw how a large number of dropdown options, though not favored in many situations, may be unavoidable. However, when applicable, it is best to carry out certain types of Bootstrap testing, such as usability testing and cross browser testing, so as not to impact user experience and ensure that browsers render your features as intended.

After ensuring the accessibility of your Bootstrap collapse and Bootstrap dropdown components, you may need to do responsive testing to ensure their responsiveness on several of your users’ devices. The responsiveness of your Bootstrap collapse and Bootstrap dropdown features directly affects the bounce rate of your website.

Let’s take a preview of our website created in the previous section and see how responsive it is on different devices in terms of Bootstrap dropdowns and collapse.

I will use LT Browser 2.0 to render the website on different devices’ viewports. The LT Browser 2.0 is a dev-friendly mobile next-generation Chromium-based browser built by LambdaTest that enables developers and testers to perform responsive testing of Bootstrap dropdown, and Bootstrap collapse on over 50+ viewports, including mobiles, tablets, and desktops.

Subscribe to our LambdaTest YouTube Channel for the latest updates on tutorials around Selenium testing, Playwright testing, and more.

Desktop Preview:

Tablet Preview:

Mobile Preview:

Visit the documentation to get started with LT Browser 2.0.

Prioritize Accessibility

Ensuring accessibility entails ensuring that your website’s features are usable and meaningful to everyone, regardless of how they interact with them. You can secure accessibility by using ARIA attributes, using semantic HTML, or carrying out accessibility testing.

For example, you can use the ARIA attribute of role=”button” when you use an anchor element as a dropdown button to show that the link is acting as a button. You can also check out Bootstrap accessibility guidelines on how to make Bootstrap dropdowns more accessible.

Use Bootstrap Classes

Use Bootstrap classes and attributes for styling your Bootstrap collapse and Bootstrap dropdown features. Bootstrap provides several classes and attributes, such as dropend and data-bs-offset.

For example, you can use the data-bs-offset attribute to give your Bootstrap dropdown menu a vertical offset.

The World Bank uses Bootstrap classes to style its dropdown as shown in the images below.

Provide Clear and Concise Content

For collapsible content, ensure it is concise and clear to spare users from excessive text and redundant information.

With Bootstrap dropdowns, though, the number of options depends on the specific use cases and the complexity of choices; where possible, keep the options around 5 to 10. It will make the dropdown easy to scan and navigate.

It may not be applicable where a long list of options is necessary, such as when you need languages, regions, or countries. However, consider using categories or sub-menus to organize them.

The below example shows how the edclub website provides digestible and clear informational dropdown menu items.

Source

Conclusion

There are more use cases for Bootstrap dropdowns and Bootstrap collapse components. You can make creative combinations of the dropdowns and collapse to capture users’ attention and give them a unique user experience.

In this Bootstrap Tutorial Part I, you have learned the nitty and gritty of Bootstrap dropdown and Bootstrap collapse components and how to use them to create a lasting impression on users by providing the information they need when needed.

You can now go and put the knowledge you have gained into practice. As we wind up with this tutorial on Bootstrap dropdowns and Bootstrap collapse, remember this is not the end but the beginning of a journey with endless possibilities. Cheers!