Skip to content
Learn Netverks

Lesson

Step 27/36 75% through track

dropdowns

Dropdowns

Last reviewed May 28, 2026 Content v20260528
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
intermediate

This lesson

This lesson teaches Dropdowns—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Dropdowns in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Dropdowns reveal a menu of actions or links from a toggle button. Bootstrap 5 uses data-bs-toggle="dropdown" on the trigger and expects the bundle JavaScript—CSS alone cannot open the menu.

Markup essentials

  • Wrap toggle + menu in dropdown (or dropup, dropend)
  • Menu container: dropdown-menu with dropdown-item links or buttons
  • Toggle: btn dropdown-toggle with data-bs-toggle="dropdown" and aria-expanded

Keyboard and split buttons

Menus support arrow keys when focused; dividers use dropdown-divider. Split buttons separate the primary action from the caret toggle—two buttons inside one btn-group.

Compare with fully CSS dropdowns in utility stacks—they often rely on :focus-within and lack the same ARIA behavior unless you add it manually.

Self-check

  1. Which data-bs-* attribute opens a dropdown?
  2. Why must the playground load bootstrap.bundle.min.js?
  3. What class styles individual menu entries?

Challenge

Menu from a button

  1. Wire data-bs-toggle="dropdown" on a button.
  2. Click to open; click outside to close.

Done when: dropdown opens and closes with Bootstrap JS.

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • What if data-bs-toggle is missing?
  • Keyboard access—what did you verify?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36