The top bar is Foundation’s responsive header pattern: top-bar wraps top-bar-left and top-bar-right regions with menu lists inside. Mobile toggles use title-bar and data-responsive-toggle.
Structure checklist
- Brand in
top-bar-left— often amenu-textlink - Primary nav in
menu vertical medium-horizontal data-responsive-menu="accordion medium-dropdown"on the menu for breakpoint behavior
Compare Bootstrap navbar markup—both solve site chrome; Foundation expects foundation() to wire responsive toggles. Keep keyboard focus order logical when menus collapse.
Important interview questions and answers
- Q: Why does top bar need JavaScript?
A: Responsive toggle, dropdown, and sticky behaviors are plugins; CSS alone lays out horizontal menus at wide breakpoints. - Q: title-bar vs top-bar?
A:title-baris the compact mobile header with hamburger;top-barholds the full navigation structure revealed at larger sizes.
Self-check
- Which two regions split brand vs navigation in a top bar?
- What initialization call must run for responsive menus to work?
Challenge
Responsive top bar
- Include title-area and menu links.
- Resize below medium and open the mobile menu toggler.
Done when: top bar collapses and expands with Foundation’s responsive menu pattern.