# Writing Nav Bar

To learn how to add a nav bar, we need to understand a new element: the anchor element!

## Anchor

A property of most websites is having **links** to other websites. For example, [this is a link to the South Brunswick CoderDojo website](https://sbdojo.github.io). Go ahead, click on it! You can see how it opens up the website in a new tab. This is exactly how the anchor element works, and will connect to how we use it in our website.

Similar to the `<img>` element, anchor works using an attribute titled `href` to provide a link source. Here is how it looks:

![](https://5148195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgIjc7Q-SbTUf-t61Rv-1887829667%2Fuploads%2F0FEwfK1W56xG0WY2MZUs%2FAnchor.png?alt=media\&token=14bb4e73-3027-4141-8948-98bb88ed313e)

Notice how the opening tag has an attribute labeled `href` with the actual link included in quotation marks.&#x20;

The text within the opening and closing tag is the `link text`, which is what shows up on screen. For example, this link will appear as [Google](https://www.google.com) on your website (where the link text is what is hyperlinked).&#x20;

### Anchor To Navigate Between Pages

The anchor element can also be used to navigate between pages. Suppose this is how the files menu of your website looks like:

![](https://5148195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgIjc7Q-SbTUf-t61Rv-1887829667%2Fuploads%2FnL88AXcEJ0gIP4ywSdUa%2Fimage.png?alt=media\&token=bb745933-0911-4639-a1d6-0f1599ec07a1)

If i wanted to link the second page (`page_two.html`) in my home page (`index.html`), I could do so by the following:

```html
<a href="/page_two.html">Link to Page Two</a>
```

Add links to your secondary or tertiary pages to your homepage to experiment. **Show your mentor to verify that you understand how to use the anchor element**. Delete the anchors afterwards.

## Combining Anchor with Unordered List

To make a nav bar, we will use the anchor element in combination with an unordered list. Later, we will add another element (the `nav` element) to format it better.

Using an unordered list with the anchor element can essentially give us a list of links. These links, as demonstrated above, can link to existing pages in our website and make a makeshift nav bar.

{% hint style="success" %}
**Task:**

In your `index.html` file, locate the `<body>` element. Locate the `<header>` element within the body.&#x20;

Write a new `<ul>` element in the `<header>`, and nest some `<li>` elements within it. If this isn't sounding familiar, see [Introduction to HTML](../../day-1/introduction-to-html#unordered-and-ordered-lists).

Add anchor elements that point to your secondary pages to the unordered list. It should look something like this:
{% endhint %}

```html
<header>
    <ul>
        <li><a href="/index.html">Home</a></li>
        <li><a href="/page_two.html">Page Two</a></li>
        <li><a href="/page_three.html">Page Three</a></li>
        <!--add more list items if necessary-->
    </ul>
</header>
```

* Notice how I added the homepage as a list item. It's still necessary to have the homepage in the nav bar, as it allows the user to navigate back home.&#x20;
* The above code snippet uses _very_ generic link text. Use names that are specific and accurately describe the page.

**Ask a mentor to confirm you did this section right.**

## Turning the List into a Nav Bar Element

Now, we will be turning our unordered list into a nav bar element. This is important as it will allow us to make it stand out and actually look like a nav bar.

{% hint style="success" %}
**Task:**

Before the `<ul>` opening tag you added previously, insert a `<nav>` opening tag. After the `</ul>` closing tag you added previously, insert a `</nav>` closing tag.

Highlight the `<ul>` element and hit the "`tab`" key to indent two spaces past the \<nav> tags. It will look something like below:
{% endhint %}

```html
<header>
    <nav> <!--notice the new "<nav>" opening tag-->
        <ul>
            <li><a href="/index.html">Home</a></li>
            <li><a href="/page_two.html">Page Two</a></li>
            <li><a href="/page_three.html">Page Three</a></li>
            <!--add more list items if necessary-->
        </ul>
    </nav> <!--notice the new "</nav>" closing tag-->
</header>
```

## Navigation Bars for All Pages

Copy paste the `<nav>` bar code you created above into the `<header>` element of each of your sub-pages. This way, viewers of your site will be able to easily access each part.
