Navigation bar patterns in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a navigation bar in web design?

A navigation bar is a section of a website that contains links to the main pages or sections. It helps users move around the site easily.

beginner

Which Tailwind CSS utility class is used to create a horizontal layout for navigation items?

The <code>flex</code> class creates a flexible container, and <code>flex-row</code> arranges items horizontally in a row.

intermediate

How do you make a navigation bar responsive using Tailwind CSS?

Use responsive utility classes like hidden and block with breakpoints (e.g., md:hidden) to show or hide menu items on different screen sizes.

beginner

Why is semantic HTML important for navigation bars?

Using semantic tags like <nav> helps screen readers and search engines understand the navigation area, improving accessibility and SEO.

beginner

What Tailwind CSS classes help visually indicate the active page in a navigation bar?

Classes like text-blue-600 or font-bold can highlight the active link to show users where they are on the site.

Which HTML element is best to wrap a navigation bar for accessibility?

A <div>

B <header>

C <section>

D <nav>

The

element specifically indicates navigation links, helping screen readers identify the navigation area.

In Tailwind CSS, which class makes a container flex horizontally?

A flex flex-row

B block

C flex-col

D grid-cols-3

flex-row arranges flex items in a horizontal row, but it requires flex to be set on the container.

How can you hide a menu on small screens but show it on medium screens using Tailwind?

A hidden md:block

B block md:hidden

C md:hidden hidden

D block hidden md:block

Using hidden md:block hides the element on small screens and shows it on medium and larger screens.

Which Tailwind class would you use to add space between navigation links horizontally?

A m-4

B space-x-4

C p-4

D space-y-4

space-x-4 adds horizontal spacing between child elements.

What is a common pattern to make a mobile-friendly navigation bar?

A Use only text links without buttons

B Always show all links horizontally

C Use a hamburger menu to toggle links

D Hide navigation on mobile

A hamburger menu toggles the navigation links on small screens, saving space and improving usability.

Describe how to build a responsive navigation bar using Tailwind CSS.

Think about how the menu changes on small vs large screens.

Explain why accessibility is important in navigation bars and how to improve it.

Imagine someone using a screen reader or keyboard only.