How to Make a Navigation Bar in HTML

Last Updated: August 13, 2019

A navigation bar makes it easier for your site visitors to move to specific places within your website. You can also highlight a page by including it in the navigation bar for visitors to see. This wikiHow will show you how to make a navigation bar in HTML.

Steps

1
Choose how you want your navigation bar to look. If you don’t have any ideas, you can take a look at the websites you like for inspiration.
- Is the navigation bar going to be vertical or horizontal?
- Will the navigation bar present drop-down menus when you hover over a section?
- Will the navigation bar change colors when you click to a page?^{[1]
  X
  Research source}
2
Open a text editor. Windows and Mac computers come with default text editor programs that will work to create or edit HTML.
- If you’re using Windows, you can use Notepad, which you can search for in the Start Menu to find this application. For a notepad program with more features you can try Notepad++.
- If you’re using a Mac, you can use TextEdit, which you can search in Spotlight.
Advertisement
3
Type "<nav>" and press ↵ Enter. This indicates the beginning of your navigation bar code.
4
Type "<ul>" and press ↵ Enter. A navigation bar, at its very core, is a list of links. You have the option to use an unordered list, an ordered list, or a definition list. Most navigation bars use the unordered list option.
5
Type "<li>" and press ↵ Enter. This adds a list item tag to whatever you type in next.
6
Type a page link in “<a href=”LINK”>LINKNAME</a>” and press ↵ Enter. If you want to include a link to your Home page, type
```
<a href=”/”>Home</a>
```
7
Type "</li>" to close the list item tag. If you forget to close a tag, you’ll see the error show up in your web page.
8
Type in more page links to fill your navigation bar. For example, you can include links to your Contact Us page, your About page, your Bio page, your Products page, and your News page.
- Make sure each link is surrounded by "<li>" and "</li>".
9
Type "</ul>" to close the unordered list. The </ul> tag will stop the code from continuing the list.
10
Type “</nav>” to close the navigation bar code. All code written outside this tag will not be included in the navigation bar.
- Your code might look like this:
  <nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/print">Print Design</a> </li> <li> <a href="/web">Web Design</a> </li> <li> <a href="/bio">Bio</a> </li> <li> <a href="/contact">Contact</a> </li> </ul> </nav>