CSS Eksperimen - 03-2 Breadcrumb

Navigasi
Breadcrumb
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

Pendahuluan
Seperti yang dijelaskan sebelumnya, navigasi adalah bagian dari
sebuah situs yang digunakan untuk berpindah dari halaman satu ke
halaman lainnya dan dapat hadir dalam banyak bentuk.
Pada materi ini, akan diberikan navigasi yang tidak merupakan
navigasi utama, tetapi navigasi tambahan yaitu Breadcrumb.

Navigasi Breadcrumb
Navigasi breadcrumb ini digunakan ketika sebuah situs memiliki
navigasi yang cukup dalam sehingga dapat membuat user lupa berada
di posisi mana atau juga pada situs yang perlu interaksi untuk kembali
yang cukup banyak.
Contoh: Situs e-commerce atau Marketplace.

Navigasi Breadcrumb
Navigasi Breadcrumb ini bisa dalam beragam bentuk. Ada yang
sederhana seperti pada contoh sebelumnya, atau ada yang memiliki
style tertentu.
Seperti pada contoh miliki google pada gambar di atas.

Implementasi Breadcrumb
Pada contoh kali ini, Kita akan buat yang sedikit lebih ada variasinya.
Pada dasarnya, pembuatan breadcrumb ini mirip dengan pembuatan
menu navigasi pada materi sebelumnya. Akan tetapi, hanya berbeda
lokasi dan sedikit modifikasi pada stylenya sesuai selera pengguna
saja.

Seperti halnya membuat menu navigasi di materi sebelumnya, Kita
juga akan memakai struktur yang sama yaitu dengan tag ul dan li untuk
tiap menu breadcrumb.
Pembedanya adalah kalau sebelumnya kita menggunakan tag nav,
sekarang akan dipakai tag div untuk membungkus semuanya.
HTML
<div class="breadcrumb"><ul>
<li><a href=”#”>Produk</a></li>
<li><a href=”#”>Kategori</a></li>
<li><a href=”#”>Sub Kategori</a></li>
<li><a href=”#”>Sub Kategori 2</a></li>
<li><a href=”#”>Detil Barang</a></li>
</ul></div>
CSS

Pertama Kita buat style dasar dari breadcrumbnya. Hilangkan style
pada list dengan list-style:none dan buat semuanya sejajar dengan
menampilkan secara inline.
HTML
</ul></div>
CSS
.breadcrumbs ul {
list-style: none;
display: inline-table;
}
.breadcrumbs ul li {
display: inline;
}

Hasil sementara akan tampak seperti gambar berikut:
→ List sudah menjadi inline dan tidak ada list-style-nya

Buat style untuk tiap elemen breadcrumb yang dibungkus dengan tag li
dan a.
HTML
</ul></div>
CSS
.breadcrumbs ul li a {
display: block;
float: left;
height: 25px;
background: #00BF7D;
text-align: center;
padding: 15px 20px 0 40px;
position: relative;
margin: 0 5px 0 0;
font-size: 14px;
text-decoration: none;
color: #fff;
}

→ Anchor text pada list dihilangkan decorationnya dan diberi style
supaya tampak seperti button.

Ketiga style border (top, bottom, dan left) akan membentuk segitiga,
sedangkan posisi dan mode absolute akan menentukan seberapa jauh
dari elemen lokasi segitiga berada di sebelah kanan elemen.
HTML
</ul></div>
CSS
.breadcrumbs ul li a:after {
content: “”;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #00BF7D;
position: absolute;
right: -20px;
top: 0;
z-index: 1;
}

→ Akan muncul bentuk segitiga sehingga elemen breadcrumb
berbentuk seperti tanda penunjuk jalan. Namun bagian belakang setiap
elemen saling menutupi, oleh karena itu perlu ditambah style lagi

Ketiga style border (top, bottom, dan left) berikutnya akan membentuk
segitiga. Kali ini dengan menggunakan pseudo-element :before,
segitiga yang akan dibuat ada di sebelah kiri elemen. Jangan lupa
hilangkan z-index supaya posisi pseudo-element ada di bawah.
HTML
</ul></div>
CSS
.breadcrumbs ul li a:before {
content: “”;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #d4f2ff;
position: absolute;
left: 0px;
top: 0;
}

→ Pada bagian kiri setiap elemen breadcrumb akan mulai berbentuk
segitiga yang tidak saling menutupi berkat style yang diberikan pada
pseudo-element before

HTML
</ul></div>
CSS
.breadcrumbs ul li:first-child a {
border-top--radius: 10px;
border-bottom-left-radius: 10px;
}
.breadcrumbs ul li:first-child a:before {
display: none;
}
Styling terakhir akan memberikan bentuk sudut seperti lingkaran pada
elemen pertama (first-child) breadcrumb pada sisi atas kiri dan bawah
kiri. Jangan lupa hilangkan segitiga di elemen pertama supaya sudut
terlihat.

HTML
</ul></div>
CSS
.breadcrumbs ul li:last-child a {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 40px;
}
.breadcrumbs ul li:last-child a:after {
display: none;
}
Kita juga akan memberikan bentuk sudut seperti lingkaran pada
elemen terakhir (first-child) breadcrumb pada sisi atas kanan dan
bawah kanan.

Set juga kelakuan ketika mouse mengarah ke elemen untuk mengganti
warnanya supaya interaktif.
HTML
</ul></div>
CSS
.breadcrumbs ul li a:hover {
background: #008FBF;
}
.breadcrumbs ul li a:hover:after {
border-left-color: #008FBF;
}

Finalisasi
Hasil akhirnya seperti pada gambar berikut.
Setelah implementasi menu navigasi breadcrumb selesai dibuat, Anda
bisa mengubah dan menyesuaikannya sesuka Anda. Misalkan spasi-
nya, warna, font, dll, atau mungkin menambah elemen lainnya.
Contoh dapat dilihat pada Codepen KuliahKita

CSS Eksperimen - 03-2 Breadcrumb

More Related Content

Viewers also liked (6)

Similar to CSS Eksperimen - 03-2 Breadcrumb (20)

More from KuliahKita (20)

Recently uploaded (20)

CSS Eksperimen - 03-2 Breadcrumb