Navigation bar patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Responsive Navigation Bar Layout

Which option correctly creates a responsive navigation bar that stacks links vertically on small screens and horizontally on larger screens using Tailwind CSS?

A <nav class="flex flex-col md:flex-row gap-4"><a href="#" class="text-blue-600">Home</a><a href="#" class="text-blue-600">About</a><a href="#" class="text-blue-600">Contact</a></nav>

B <nav class="flex-row flex md:flex-col gap-4"><a href="#" class="text-blue-600">Home</a><a href="#" class="text-blue-600">About</a><a href="#" class="text-blue-600">Contact</a></nav>

C <nav class="flex flex-row md:flex-col gap-4"><a href="#" class="text-blue-600">Home</a><a href="#" class="text-blue-600">About</a><a href="#" class="text-blue-600">Contact</a></nav>

D <nav class="flex-col flex md:flex-row gap-4"><a href="#" class="text-blue-600">Home</a><a href="#" class="text-blue-600">About</a><a href="#" class="text-blue-600">Contact</a></nav>

💡 Hint

Think about the default flex direction on small screens and how it changes on medium screens.

The navigation bar should be vertical (column) on small screens and horizontal (row) on medium and larger screens. Tailwind's flex-col sets vertical layout by default, and md:flex-row changes it to horizontal on medium screens and up.

❓ accessibility

intermediate

Accessible Navigation Bar ARIA Roles

Which option correctly adds ARIA roles to a navigation bar for better accessibility?

A <nav aria-role="navigation" aria-label="Main menu"><ul><li><a href="#">Home</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav>

B <nav role="nav" aria-label="Main menu"><ul><li><a href="#">Home</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav>

C <nav role="navigation" aria-label="Main menu"><ul><li><a href="#">Home</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav>

D <nav role="navigation" aria-labelledby="menu"><ul><li><a href="#">Home</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav>

💡 Hint

ARIA roles must be spelled exactly and used properly to help screen readers.

The correct ARIA role for a navigation landmark is navigation. The attribute is role="navigation". The aria-label describes the navigation region. Option C uses these correctly.

❓ selector

advanced

Tailwind CSS Selector Specificity

Given this HTML snippet, which Tailwind CSS class combination will style only the active navigation link with a blue underline?

Tailwind

<nav><a href="#" class="nav-link active">Home</a><a href="#" class="nav-link">About</a><a href="#" class="nav-link">Contact</a></nav>

A .nav-link.active { @apply border-b-2 border-blue-600; }

B .nav-link .active { @apply border-b-2 border-blue-600; }

C .active.nav-link { @apply border-b-2 border-blue-600; }

D .nav-link > .active { @apply border-b-2 border-blue-600; }

💡 Hint

Remember how CSS selectors target elements by class names and their relationship.

Option A targets elements with both nav-link and active classes, which matches the active link. Other options select child or descendant elements incorrectly.

🧠 Conceptual

advanced

Keyboard Navigation in Navigation Bars

Which option best describes how to ensure keyboard users can navigate a multi-level navigation bar effectively?

A Use <span> elements with click handlers and no focus styles for dropdown toggles.

B Use only <div> elements for all navigation items and rely on mouse hover for dropdowns.

C Disable keyboard focus on dropdown menus to prevent confusion.

D Use <button> elements for dropdown toggles, manage focus with JavaScript, and ensure visible focus styles on links.

💡 Hint

Think about how keyboard users interact and what elements support focus and activation.

Option D uses semantic button elements for toggles, which are keyboard accessible. Managing focus and visible focus styles help keyboard users know where they are.

❓ rendering

expert

Tailwind CSS Sticky Navigation Bar with Shadow

Which option produces a sticky navigation bar at the top of the page with a subtle shadow that appears only when the user scrolls down?

A <nav class="sticky top-0 bg-white shadow-md">...</nav>

B <nav class="sticky top-0 bg-white">...</nav>

C <nav class="sticky top-0 bg-white shadow-md opacity-0">...</nav>

D <nav class="fixed top-0 bg-white shadow-md">...</nav>

💡 Hint

Sticky keeps the nav at top but shadow should appear only on scroll, so initial shadow class is not added.

Option B creates a sticky nav bar without shadow initially. The shadow can be added dynamically with JavaScript on scroll. Options A and D always show shadow or use fixed positioning, and B hides the nav with opacity.