nav | Codingku

Elemen <nav> mewakili bagian halaman yang bertujuan untuk menyediakan tautan navigasi, baik di dalam dokumen saat ini atau ke dokumen lain.

Contoh umum bagian navigasi adalah menu, daftar isi, dan indeks.

Syntax

Tag <nav> ditulis seperti <nav></nav> dengan konten navigasi disisipkan diantara tag pembuka dan penutup.

Seperti ini:

<nav>
	Navigasi disini...
</nav>

Contoh didalam Elemen `header`

<!DOCTYPE html>
<title>Example</title>
<style>
  .example1 header,
  .example1 article,
  .example1 footer,
  .example1 main,
  .example1 nav {
    border: 1px solid orange;
    padding: 3px;
    margin: 3px;
    width: 50%;
  }

  .example1 nav {
    background: #FDF7D3;
  }
</style>
<div class="example1">
  <header>Header...
    <nav>Nav...</nav>
  </header>
  <main>
    Main...
    <article>Article...</article>
    <article>Article...</article>
    <article>Article...</article>
  </main>
  <footer>Footer...
  </footer>
</div>

Contoh di dalam Elemen `body`

<!DOCTYPE html>
<title>Example</title>
<style>
  .example2 header,
  .example2 article,
  .example2 footer,
  .example2 main,
  .example2 nav {
    border: 1px solid orange;
    padding: 3px;
    margin: 3px;
    width: 50%;
  }

  .example2 nav {
    background: #FDF7D3;
  }
</style>
<div class="example2">
  <nav>Nav...</nav>
  <header>Header...
  </header>
  <main>
    Main...
    <article>Article...</article>
    <article>Article...</article>
    <article>Article...</article>
  </main>
  <footer>Footer...
  </footer>
</div>

Contoh sebagai List

<nav>
  <ul>
    <li><a href="/css/" target="_blank">CSS</a></li>
    <li><a href="/html/" target="_blank">HTML</a></li>
    <li><a href="/javascript/" target="_blank">JavaScript</a></li>
    <li><a href="/sql/tutorial/" target="_blank">SQL</a></li>
  </ul>
</nav>

<!DOCTYPE html>
<title>Example</title>
<style>
  .example4 nav ul li {
    display: inline;
    list-style-type: none;
    padding: 5px;
    background: orange;
    margin-left: 1px;
  }

  .example4 nav ul li:hover {
    background-color: #fff4c8;
  }

  .example4 nav a {
    color: white;
    font-weight: bold;
    text-decoration: none;
  }

  .example4 nav a:hover {
    color: orange;
  }
</style>
<div class="example4">
  <nav>
    <ul>
      <li><a href="/css/" target="_blank">CSS</a></li>
      <li><a href="/html/" target="_blank">HTML</a></li>
      <li><a href="/javascript/" target="_blank">JavaScript</a></li>
      <li><a href="/sql/tutorial/" target="_blank">SQL</a></li>
    </ul>
  </nav>
</div>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <nav> dengan pengaturan CSS:

nav {
  display: block;
}