Cara Membuat Pill Navigation

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari December 5, 2020

Belajar cara membuat menu navigasi pil dengan CSS.

Section Artikel

1 Navigasi Pil
2 Membuat Menu Navigasi Pil
- 2.1 Langkah 1) Tambahkan HTML
- 2.2 Langkah 2) Tambahkan CSS
3 Navigasi Pill Vertikal

Navigasi Pil

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.pill-nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}

.pill-nav a:hover {
  background-color: #ddd;
  color: black;
}

.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
}
</style>
</head>
<body>

<h2>Cara Membuat Menu Navigasi Pil</h2>

<div class="pill-nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

</body>
</html>

Membuat Menu Navigasi Pil

Langkah 1) Tambahkan HTML

Contoh:

<div class="pill-nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

Langkah 2) Tambahkan CSS

Contoh:

/* Atur style tautan di dalam menu navigasi pil */
.pill-nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}

/* Ubah warna link saat mengarahkan mouse */
.pill-nav a:hover {
  background-color: #ddd;
  color: black;
}

/* Tambahkan warna ke link active/current */
.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
}

Navigasi Pill Vertikal

Tambahkan display: block pada link, dan tautan akan muncul secara vertikal, bukan horizontal.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.pill-nav a {
  display: block;
  color: black;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}

.pill-nav a:hover {
  background-color: #ddd;
  color: black;
}

.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
}
</style>
</head>
<body>

<h2>Cara Membuat Navigasi Pill Vertikal</h2>

<div class="pill-nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

</body>
</html>

How To