> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/backend-frameworks-next.js/hands-on-practice-2/start-on-the-navbar.md).

# Start On The Navbar

## Navbar Building

Code base for Navbar component Creation

{% file src="/files/XRSRmE1RAk2PurOG7kTP" %}
index.html
{% endfile %}

```
// nav element
└── body
            ├── nav (class="bg-blue-700 border-b border-blue-500")
            │   ├── div (container: mx-auto max-w-7xl px-2 sm:px-6 lg:px-8)
            │   │   └── div (flex container: relative flex h-20 items-center justify-between)
            │   │       ├── div (mobile menu button container: absolute inset-y-0 left-0 flex items-center md:hidden)
            │   │       │   └── button (#mobile-dropdown-button)
            │   │       │       ├── span (overlay)
            │   │       │       ├── span (sr-only, "Open main menu")
            │   │       │       └── svg (menu icon)
            │   │       ├── div (logo & desktop menu container: flex flex-1 items-center justify-center md:items-stretch md:justify-start)
            │   │       │   ├── a (logo link)
            │   │       │   │   ├── img (logo image)
            │   │       │   │   └── span (logo text: "PropertyPulse")
            │   │       │   └── div (desktop menu: hidden md:ml-6 md:block)
            │   │       │       └── div (menu links container: flex space-x-2)
            │   │       │           ├── a ("Home")
            │   │       │           ├── a ("Properties")
            │   │       │           └── a ("Add Property")
            │   │       ├── div (right side menu for logged-out users: hidden md:block md:ml-6)
            │   │       │   └── div (flex items-center)
            │   │       │       └── button ("Login or Register")
            │   │       └── div (right side menu for logged-in users: absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0)
            │   │           ├── a (messages link with notification)
            │   │           │   ├── button (notification icon)
            │   │           │   └── span (notification count, "2")
            │   │           └── div (profile dropdown container: relative ml-3)
            │   │               ├── div
            │   │               │   └── button (#user-menu-button with profile image)
            │   │               └── div (dropdown menu: hidden absolute right-0, etc.)
            │   │                   ├── a ("Your Profile")
            │   │                   ├── a ("Saved Properties")
            │   │                   └── a ("Sign Out")
            │   └── div (mobile menu: hidden, id="mobile-menu")
            │       └── div (mobile menu links container: space-y-1 px-2 pb-3 pt-2)
            │           ├── a ("Home")
            │           ├── a ("Properties")
            │           ├── a ("Add Property")
            │           └── button ("Login or Register")
```

### 1. Setting Up the Components Folder

1. **Create a&#x20;**<mark style="color:purple;">**`components`**</mark>**`/` Folder:**
   * In the root of your project (outside the `app/` directory), create a new folder named `components`.
   * This folder will store all non-page components, keeping your app directory reserved for page components.
2. **Create the&#x20;**<mark style="color:orange;">**Navbar**</mark>**&#x20;File:**
   * Inside the `components/` folder, create a new file called <mark style="color:orange;">`Navbar.js`</mark>`x`.

***

### 2. Building the Navbar Component

#### a. Define the Component Structure

1. **Start with the Boilerplate Code:**

   * Open `Navbar.jsx` and add the following code structure.\
     Since the Navbar will eventually include interactive elements (like dropdowns and toggles), you can mark it as a client component by adding the `"use client"` directive at the top:

   ```jsx
   "use client";

   export default function Navbar() {
     return (
       <nav>
         {/* Navbar content will go here */}
       </nav>
     );
   }
   ```

#### b. Copy and Paste the HTML Markup

1. **Extract the HTML:**
   * Open your provided **index.html** file and locate the <mark style="color:orange;">`<nav>`</mark> element (from the opening <mark style="color:orange;">`<nav>`</mark> tag to its closing tag).
   * Copy the complete markup for the navigation bar.
2. **Paste into the Component:**

   * Replace the placeholder comment inside `<nav>` with the copied HTML.
   * Your component will now look similar to:

   ```jsx
   "use client";

   export default function Navbar() {
     return (
       <nav className="bg-blue-700 border-b border-blue-500">
         {/* Paste the complete copied markup from index.html here */}
       </nav>
     );
   }
   ```

***

### 3. Converting HTML to Valid JSX

After pasting, you’ll need to update the code to meet JSX requirements:

#### a. Update Attribute Names

* **Replace `class` with `className`:**\
  Use your editor’s multi-cursor feature (e.g., Command/Control + Shift + L) to change all instances.
* **Convert HTML attributes to camelCase:**\
  For example, change:
  * `tabindex` to `tabIndex`
  * `stroke-width` to `strokeWidth`
  * `stroke-linecap` to `strokeLinecap`
  * `stroke-linejoin` to `strokeLinejoin`

#### b. Commenting in JSX

* **Convert HTML Comments:**\
  HTML comments (`<!-- comment -->`) are not allowed in JSX. Replace them with JSX comments:

  ```jsx
  // jsx comments
  {/* This is a comment */}
  ```

#### c. Verify and Save

* **Save the file** and check the browser’s console for any warnings or errors related to JSX syntax.
* Fix any issues (e.g., missing closing tags, incorrect attribute names).

***

### 4. Integrating the Navbar into Your Layout

#### a. Update the App Layout

1. **Locate Your Layout File:**
   * In the `app/` folder, open your main layout file (typically <mark style="color:orange;">`layout.jsx`</mark> or <mark style="color:orange;">`layout.js`</mark>).
2. **Import the Navbar:**

   * At the top of your layout file, import the Navbar component:

   ```jsx
   import Navbar from '@/components/Navbar';
   ```
3. **Insert the Navbar into the Layout:**

   * Place the `<Navbar />` component above the `<main>` tag (or wherever appropriate) so that it appears on every page:

   ```jsx
   //app/layout.jsx
   import Navbar from '@/components/Navbar';
   import '@/app/globals.css'

   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <body>
           <Navbar />
           <main>{children}</main>
         </body>
       </html>
     );
   }
   ```

***

### 5. Handling Images and Assets

#### a. Prepare Your Image Assets

1. **Move Images to the Public Folder:**
   * Copy the property images (if needed) into the <mark style="color:purple;">`public/images`</mark> folder so they’re directly accessible.
2. **Create an Assets Folder for Logos/Icons:**
   * For static assets like the <mark style="color:yellow;">logo</mark> or profile images, create an <mark style="color:purple;">`assets/images`</mark> folder in the root of your project.

#### b. Use Next.js Image Component

1. **Import the Image Component:**

   * In your Navbar, import Next.js’ Image component:

   ```jsx
   import Image from 'next/image';
   ```
2. **Import Specific Images:**

   * For example, if you have a logo:

   ```jsx
   import logo from '@/assets/images/logo-white.png';
   import profileDefault from '@/assets/images/profile.png';
   ```
3. **Replace `<img>` Tags:**

   * Locate the `<img>` tags in your <mark style="color:orange;">Navbar code</mark> and replace them with the `<Image />` component, updating the <mark style="color:orange;">`src`</mark> property to the imported images:

   ```jsx
   <Image src={logo} alt="PropertyPulse" className="h-10 w-auto" />
   ```

***

### 6. Testing and Debugging

1. **Run Your Development Server:**
   * In your terminal, execute:

     ```bash
     npm run dev
     ```
   * Open <http://localhost:3000> to view your site.

<figure><img src="https://3076957159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgrDGzRxBIgT2hVX8HkFG%2Fuploads%2FXgsZirzfgy5AphcxxABC%2FNavbar%20Property%20pulse%20.jpg?alt=media&amp;token=ea9ce8aa-d56a-4827-8821-6897247cea8e" alt="" width="375"><figcaption></figcaption></figure>

1. **Verify the Navbar:**
   * Ensure the navigation bar appears correctly on every page.
   * Check the browser console for any JSX or image-related errors, and adjust as necessary.
2. **Interactive Elements:**
   * In future steps, you can add interactivity (e.g., dropdowns, toggles) by utilizing client-side state and hooks in this component.

***

### 7. Recap and Best Practices

* **Component Isolation:**\
  Building the Navbar as a separate component promotes reusability and maintainability.
* **JSX Conversion:**\
  Always update HTML attributes and comments when converting HTML to JSX.
* **Asset Management:**\
  Utilize the Next.js Image component for optimized image handling, and organize your assets in dedicated folders (`public` for publicly served files, `assets` for imported assets).