Navigasi yang baik membantu pengunjung menemukan konten dengan mudah. Sitemas memiliki beberapa area navigasi yang bisa dikustomisasi: navbar utama, sidebar, dan footer. Artikel ini akan memandu Anda mengatur semuanya.

Arsitektur Navigasi Sitemas

Sitemas memiliki beberapa elemen navigasi:

ElemenLokasiFile Konfigurasi
Top NavbarHeader halamanconstants.ts (NAV_ITEMS)
Left SidebarSidebar kiri artikelAuto-generated dari konten
Right Sidebar (TOC)Sidebar kanan artikelAuto-generated dari heading
Footer LinksFooter websiteFooter.astro
Bottom NavigationMobile fixed bottomconstants.ts (NAV_ITEMS)

1. Mengatur Navbar Utama

Struktur NAV_ITEMS

Menu utama diatur di src/utils/constants.ts:

src/utils/constants.ts
typescript 
export const NAV_ITEMS = [
    { label: 'Beranda', href: '/', icon: 'home' },
    { label: 'Dokumentasi', href: '/#dokumentasi', icon: 'book' },
    { label: 'Tutorial', href: '/#tutorial', icon: 'code' },
    { label: 'Insight', href: '/#insight', icon: 'lightbulb' },
    { label: 'Tips', href: '/#tips', icon: 'zap' },
] as const;

Properti Menu Item

PropertiTipeDeskripsi
labelstringTeks yang ditampilkan
hrefstringURL tujuan (relatif atau absolut)
iconstringNama icon (opsional, untuk mobile nav)

Menambah Menu Baru

Untuk menambah menu, tambahkan objek baru ke array:

Menambah menu
typescript 
export const NAV_ITEMS = [
    { label: 'Beranda', href: '/', icon: 'home' },
    { label: 'Blog', href: '/blog', icon: 'edit' },        // Menu baru
    { label: 'Produk', href: '/produk', icon: 'box' },     // Menu baru
    { label: 'Tutorial', href: '/#tutorial', icon: 'code' },
    { label: 'Kontak', href: '/kontak', icon: 'mail' },    // Menu baru
] as const;
Jumlah Menu

Idealnya navbar memiliki 4-6 item untuk desktop. Terlalu banyak menu akan terlihat crowded dan membingungkan pengguna.

Untuk navigasi ke section di halaman yang sama, gunakan hash:

{ label: 'Fitur', href: '/#fitur', icon: 'star' }

Ini akan scroll ke elemen dengan id="fitur" di halaman.

Sitemas saat ini menggunakan navigasi flat (tanpa dropdown). Jika membutuhkan dropdown, Anda perlu memodifikasi komponen Navbar.astro.

2. Menu Sekunder

Untuk menu tambahan yang kurang prioritas:

src/utils/constants.ts
typescript 
export const NAV_SECONDARY = [
    { label: 'Produk', href: '/produk' },
    { label: 'Tentang', href: '/tentang' },
    { label: 'Kontak', href: '/kontak' },
] as const;

Menu sekunder biasanya digunakan di burger menu mobile atau area tertentu.

Footer Sitemas memiliki beberapa kolom link yang diatur langsung di src/components/global/Footer.astro:

Footer.astro - footerLinks
typescript 
const footerLinks = {
    content: [
        { label: 'Blog', href: '/blog' },
        { label: 'Tag', href: '/tag' },
        { label: 'Tips', href: '/kategori/tips' },
        { label: 'Tutorial', href: '/kategori/tutorial' },
        { label: 'Insight', href: '/kategori/insight' },
        { label: 'Dokumentasi', href: '/kategori/dokumentasi' },
    ],
    about: [
        { label: 'Tentang Kami', href: '/tentang' },
        { label: 'Tim', href: '/tim' },
        { label: 'Karir', href: '/karir' },
        { label: 'Kontak', href: '/kontak' },
        { label: 'FAQ', href: '/faq' },
        { label: 'Atribusi', href: '/atribusi' },
    ],
    legal: [
        { label: 'Privacy Policy', href: '/privacy-policy' },
        { label: 'Cookie Policy', href: '/cookie-policy' },
        { label: 'Disclaimer', href: '/disclaimer' },
        { label: 'Syarat & Ketentuan', href: '/terms' },
    ],
    resources: [
        { label: 'Sitemap', href: '/sitemap' },
        { label: 'RSS Feed', href: '/rss.xml' },
        { label: 'Media Kit', href: '/media-kit' },
        { label: 'Changelog', href: '/changelog' },
        { label: 'Panduan Penulis', href: '/panduan-penulis' },
        { label: 'Statistik', href: '/statistik' },
    ],
};

Edit array yang sesuai di footerLinks:

Contoh menambah link
typescript 
resources: [
    { label: 'Sitemap', href: '/sitemap' },
    { label: 'RSS Feed', href: '/rss.xml' },
    { label: 'API Docs', href: '/api-docs' },  // Link baru
    { label: 'Status', href: 'https://status.example.com' },  // Link eksternal
],
Link Eksternal

Untuk link ke website lain, gunakan URL lengkap dengan https://. Link internal cukup gunakan path relatif seperti /blog.

Fungsi getLinkIcon() di Footer.astro menentukan icon untuk setiap link. Untuk menambah icon link baru:

Footer.astro - getLinkIcon
typescript 
function getLinkIcon(label: string) {
    switch (label) {
        case 'Blog':
            return IconFeather;
        case 'API Docs':           // Tambah case baru
            return IconCode;
        case 'Status':             // Tambah case baru
            return IconActivity;
        // ... case lainnya
        default:
            return IconPage;
    }
}

Menambah Kolom Baru

Untuk menambah kolom footer baru, edit bagian JSX di Footer.astro:

Footer.astro - Menambah kolom
astro 
<!-- Kolom yang ada -->
<div class="footer-section">
    <h4 class="footer-heading">KONTEN</h4>
    <!-- links -->
</div>

<!-- Kolom baru -->
<div class="footer-section">
    <h4 class="footer-heading">PRODUK</h4>
    <ul class="footer-links">
        {footerLinks.products.map((link) => (
            <li>
                <a href={link.href}>{link.label}</a>
            </li>
        ))}
    </ul>
</div>

Dan tambahkan data di footerLinks:

products: [
    { label: 'Template Blog', href: '/produk/template-blog' },
    { label: 'Theme Premium', href: '/produk/theme' },
    { label: 'Plugin', href: '/produk/plugin' },
],

Social media links diatur di constants.ts:

src/utils/constants.ts
typescript 
export const SOCIAL = {
    github: '#',           // Ganti dengan URL GitHub Anda
    twitter: '#',          // Ganti dengan URL Twitter/X Anda
    youtube: '#',          // Ganti dengan URL YouTube Anda
    instagram: '#',        // Ganti dengan URL Instagram Anda
    facebook: '#',         // Ganti dengan URL Facebook Anda
    whatsapp: '#',         // Ganti dengan URL WhatsApp Channel
    linkedin: '#',         // Ganti dengan URL LinkedIn Anda
    tiktok: '#',           // Ganti dengan URL TikTok Anda
} as const;

Ganti # dengan URL lengkap. Link dengan value # akan ditampilkan sebagai disabled atau hidden (tergantung implementasi).

Menampilkan/Menyembunyikan Social Icon

Footer hanya menampilkan social media yang memiliki URL valid (bukan #). Untuk menambah platform baru:

  1. Tambahkan di SOCIAL di constants.ts
  2. Import icon yang sesuai di Footer.astro
  3. Tambahkan case di mapping icon

6. Left Sidebar Kategori

Left sidebar di halaman artikel berisi daftar kategori dan artikel terkait. Ini auto-generated dari konten, bukan dikonfigurasi manual.

Cara Kerja

  1. Sidebar membaca semua artikel dari collection blog
  2. Mengelompokkan berdasarkan category dan topic
  3. Menampilkan artikel yang relevan

Mengontrol Tampilan

Jika ingin mengubah logika pengelompokan atau limit artikel, edit src/components/global/LeftSidebar.astro.

7. Right Sidebar (Table of Contents)

Table of Contents di sidebar kanan auto-generated dari heading (H2, H3) di artikel. Tidak perlu konfigurasi manual.

Heading yang Ditampilkan

Secara default, TOC menampilkan:

  • H2 (##) sebagai item utama
  • H3 (###) sebagai sub-item

H1 tidak ditampilkan karena harusnya hanya ada satu H1 (title artikel).

8. Mobile Bottom Navigation

Di mobile, Sitemas menampilkan fixed bottom navigation. Item-nya mengikuti NAV_ITEMS:

Mobile navigation
typescript 
// 5 item pertama dari NAV_ITEMS ditampilkan di bottom nav
export const NAV_ITEMS = [
    { label: 'Beranda', href: '/', icon: 'home' },      // Tampil
    { label: 'Blog', href: '/blog', icon: 'edit' },     // Tampil
    { label: 'Search', href: '/search', icon: 'search' }, // Tampil
    { label: 'Kategori', href: '/kategori', icon: 'folder' }, // Tampil
    { label: 'Menu', href: '#menu', icon: 'menu' },     // Tampil (opens sidebar)
] as const;
Icon di Mobile

Properti icon penting untuk mobile bottom nav karena hanya icon yang ditampilkan (label hidden untuk space).

9. Breadcrumb Navigation

Breadcrumb di halaman artikel auto-generated dengan struktur:

Beranda > Kategori > Judul Artikel

Untuk mengubah label “Beranda”, edit src/components/global/Breadcrumbs.astro.

Best Practices

  1. Konsistensi — Gunakan label yang sama untuk link yang menuju halaman yang sama
  2. Hierarki Jelas — Prioritaskan menu berdasarkan pentingnya
  3. Tidak Terlalu Banyak — Maksimal 6-7 item di navbar utama
  4. Link Valid — Pastikan semua link menuju halaman yang ada
  5. Mobile-First — Test navigasi di mobile

Langkah Selanjutnya

Setelah navigasi selesai, konfigurasi social media links:

Hubungkan Social Media

Pelajari cara menghubungkan profil social media dan komunitas ke website Anda.

Social Media & Komunitas

Kesimpulan

Navigasi adalah jembatan antara pengunjung dan konten Anda. Sitemas menyediakan sistem navigasi yang fleksibel — dari navbar utama hingga footer yang kaya informasi.

Kunci navigasi yang baik adalah kesederhanaan dan konsistensi. Pengunjung harus bisa menemukan apa yang mereka cari dalam 1-2 klik. Gunakan label yang jelas dan hindari membuat pengunjung berpikir terlalu keras.

M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.