Navigation bar patterns in Tailwind - Mini Project: Build & Apply

Navigation Bar Patterns with Tailwind CSS

📖 Scenario: You are building a simple website header with a navigation bar. This bar will have a logo on the left and three links on the right. The navigation bar should look neat and be easy to use on both desktop and mobile screens.

🎯 Goal: Create a responsive navigation bar using Tailwind CSS. The bar should have a logo text on the left and three navigation links on the right. On smaller screens, the links should stack vertically.

📋 What You'll Learn

Use a <header> element for the navigation bar container.

Place the logo text inside a <div> on the left side.

Add three navigation links: Home, About, and Contact inside a <nav> element on the right side.

Use Tailwind CSS classes to style the navigation bar with a background color, padding, and spacing.

Make the navigation links stack vertically on screens smaller than 640px (mobile) and horizontally on larger screens.

Ensure the navigation bar uses Flexbox for layout.

💡 Why This Matters

🌍 Real World

Navigation bars are essential for websites to help users find pages easily. Responsive design ensures the site works well on phones and desktops.

💼 Career

Web developers often build navigation bars using CSS frameworks like Tailwind. Understanding responsive layouts and accessibility is key for professional web development.

1

Create the basic HTML structure for the navigation bar

Write the HTML code to create a <header> element with a <div> inside it for the logo text 'MySite'. Also add a <nav> element with three links: Home, About, and Contact. Do not add any Tailwind classes yet.

Tailwind

  MySite
  
    Home
    About
    Contact
  

Need a hint?

Start by writing the main container <header>. Inside it, add a <div> for the logo text 'MySite'. Then add a <nav> with three <a> links for navigation.

2

Add Tailwind CSS classes for layout and spacing

Add Tailwind CSS classes to the <header> to make it a flex container with horizontal layout and space between items. Add padding of 1rem (use p-4). Add classes to the <nav> to display links horizontally with space between them using flex and space-x-6. Add the class font-bold to the logo <div>.

Tailwind

  MySite
  
    Home
    About
    Contact
  

Need a hint?

Use flex on the header to arrange children horizontally. Use justify-between to separate logo and nav. Add padding with p-4. For nav links, use flex and space-x-6 to space links horizontally.

3

Make the navigation responsive for small screens

Add Tailwind responsive classes so that on screens smaller than 640px (sm breakpoint), the <nav> links stack vertically with vertical spacing space-y-2 and remove horizontal spacing. On larger screens, keep the links horizontal with flex and space-x-6. Use sm:flex-row and flex-col for direction switching.

Tailwind

  MySite
  
    Home
    About
    Contact
  

Need a hint?

Use flex-col to stack links vertically by default. Use sm:flex-row to switch to horizontal on larger screens. Adjust spacing with space-y-2 for vertical and sm:space-x-6 for horizontal spacing.

4

Add hover effect and accessibility features

Add Tailwind classes to the <a> links to change text color to blue on hover using hover:text-blue-600. Also add aria-label attributes to each link with values: 'Go to Home page', 'Go to About page', and 'Go to Contact page' respectively.

Tailwind

  MySite
  
    Home
    About
    Contact
  

Need a hint?

Add hover:text-blue-600 to each link to change color on hover. Add descriptive aria-label attributes for screen readers to each link.