Dropdown pane

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Dropdown pane—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Dropdown pane in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

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.

Dropdown panes float a small panel of links or actions from a trigger. Foundation wires behavior with data-toggle on the button (pointing at the pane’s id) and data-dropdown on the pane. CSS alone cannot open the menu—you need jQuery and $(document).foundation() in the playground.

Markup essentials

Trigger: button with data-toggle="paneId"
Pane: div.dropdown-pane with matching id and data-dropdown
Position: classes like dropdown-pane-right or data-position="bottom" tune placement

Keyboard and focus

Test Escape to close and tab order through menu links. Add visible focus styles if you override Foundation defaults in production themes.

Self-check

Which attribute on the trigger opens a specific pane?
Why must the playground load Foundation JS?
What class names the floating panel container?

Playground

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

Discussion

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

Starter discussion topics

data-toggle target correct?
Click outside close?

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