Navigation Menu

Kustomisasi menu navigasi aplikasi Hexaflate

Panduan Navigation Menu (Konsep + Praktik)

Navigation Page - Full Overview

Bagian ini menjelaskan cara kerja navigasi sekaligus cara konfigurasi, dengan definisi yang konsisten dengan perilaku sistem.

Konsep Dasar (Wajib Dipahami)

Di Hexaflate, Canvas hanya mendefinisikan screen, tetapi Navigation menentukan apakah screen bisa dibuka oleh user atau tidak.

Screen yang tidak direferensikan di Navigation → tidak reachable dan akan memunculkan warning.

Jenis Navigasi (Makna Teknis)

1. Dinamis

  • Screen yang didefinisikan dan dikustomisasi di Canvas

  • Dibuka di dalam konteks main navigation

  • Tidak membuka window / stack baru

  • Digunakan untuk:

    • Beranda
    • Trending
    • Screen custom hasil Canvas

Contoh

  • Jenis Navigasi: Dinamis
  • Layar Dinamis: home

➡️ Klik menu → membuka screen home dari Canvas

2. Layar

  • Screen yang sudah diprogram secara internal
  • Dibuka di main navigation
  • Tidak membuka stack baru
  • Tidak bisa dikustomisasi via Canvas

Digunakan untuk screen bawaan sistem.

3. Rute

  • Membuka screen baru / window baru

  • Membuat navigation stack terpisah

  • Digunakan untuk:

    • Produk
    • Notifikasi
    • Deposit
    • Flow transaksi

Secara UX: masuk halaman baru, bukan ganti tab utama.

4. URL Eksternal

  • Membuka website atau halaman luar aplikasi
  • Biasanya via WebView atau browser

A. Masuk ke Navigation

  1. Panel Admin → Layout Aplikasi
  2. Klik tab Navigation

Di sini kamu mengatur:

  • Gaya menu
  • Menu Utama (bottom navigation)
  • Menu Lainnya (overflow)

Masuk ke Navigation - Navigation tab

B. Gaya Menu (Visual Only)

Pilih salah satu Gaya Menu:

  • Floating Dock
  • Bar Bawah Statis
  • Bar Bawah Geser
  • Bar Tengah Menonjol

Gaya Menu - Empat opsi style

⚠️ Ini hanya tampilan, tidak memengaruhi logic navigasi.

C. Menu Utama (Bottom Navigation)

Setiap item menu punya:

  • Ikon
  • Label
  • Jenis Navigasi
  • Target (screen / rute / URL)
  • Status aktif

Menu Utama - Bottom Navigation items

Contoh: Menghubungkan Screen Canvas ke Menu

Studi kasus

  • Awalnya hanya ada home
  • Kamu menambahkan screen baru di Canvas: trending
  • Screen berhasil dibuat, tapi tidak bisa dibuka

Solusi

  1. Masuk ke Navigation

  2. Klik + Tambah Item Menu Utama

  3. Set:

    • Jenis Navigasi: Dinamis
    • Layar Dinamis: trending
    • Label: Trending
    • Ikon: sesuai kebutuhan

  4. Aktifkan menu

➡️ Sekarang screen trending bisa dibuka user.

Tambah Item Menu Utama

D. Warning: Layar Belum Ditambahkan ke Navigasi

Jika ada screen Canvas yang:

  • Tidak direferensikan oleh Dinamis atau Layar
  • Tidak punya entry point

Akan muncul warning seperti:

Layar Belum Ditambahkan ke Navigasi contoh: trending

Ini artinya:

  • Screen valid
  • Tapi tidak ada menu yang mengarah ke sana
  • User tidak mungkin membukanya

⚠️ Bukan error, tapi design guardrail.

Warning - Layar Belum Ditambahkan ke Navigasi

E. Menu Lainnya (Overflow Menu)

Digunakan jika menu utama terlalu banyak.

  • Header Menu Lainnya:

    • Ikon
    • Label
    • Aktif / Nonaktif

  • Item di dalamnya:

    • Menggunakan jenis navigasi yang sama
    • Dinamis / Layar / Rute / URL

Menu Lainnya - Overflow Menu