> For the complete documentation index, see [llms.txt](https://sbdojo.gitbook.io/sushi-cards/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sbdojo.gitbook.io/sushi-cards/2021-2022/session-1/make-a-website/day-3-adding-nav-bar/writing-nav-bar.md).
# 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 `` element, anchor works using an attribute titled `href` to provide a link source. Here is how it looks:
Notice how the opening tag has an attribute labeled `href` with the actual link included in quotation marks.
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).
### 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:
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
Link to Page Two
```
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 `` element. Locate the `` element within the body.
Write a new `
` element in the ``, and nest some `
` elements within it. If this isn't sounding familiar, see [Introduction to HTML](/sushi-cards/2021-2022/session-1/make-a-website/day-1/introduction-to-html.md#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
```
* 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.
* 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 `
` opening tag you added previously, insert a `
` closing tag you added previously, insert a `` closing tag.
Highlight the `
` element and hit the "`tab`" key to indent two spaces past the \