Panel navigasi
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Panel navigasi adalah komponen penting di aplikasi TV karena memungkinkan pengguna
mengakses berbagai tujuan dan fitur. Panel navigasi adalah
tulang punggung arsitektur informasi aplikasi, yang memberikan cara yang jelas dan intuitif
untuk menavigasi aplikasi.
Berbeda dengan panel navigasi seluler, panel navigasi di
TV memiliki status yang diperluas dan diciutkan yang terlihat oleh pengguna.
Referensi
Sorotan
- Tujuan diurutkan sesuai dengan tingkat kepentingan pengguna, dengan tujuan yang sering
digunakan terlebih dahulu dan tujuan terkait dikelompokkan bersama.
- Kolom samping navigasi diperlukan untuk panel navigasi standar dan modal
saat diciutkan.
Varian
Ada dua jenis gaya panel navigasi:
- Panel navigasi standar — Diperluas untuk
membuat ruang tambahan bagi navigasi, yang mendorong konten halaman ke samping.
- Panel navigasi modal — Muncul sebagai
overlay di atas konten aplikasi dengan scrim yang membantu
meningkatkan keterbacaan saat panel diperluas.
Panel navigasi standar
Anatomi
- Bagian atas: Menampilkan logo aplikasi. Berfungsi sebagai tombol untuk
mengganti profil atau memicu tindakan penelusuran. Dalam status diciutkan,
hanya ikon yang tetap terlihat di penampung atas.
- Item navigasi: Setiap item di kolom samping navigasi menampilkan
kombinasi ikon dan teks, dengan hanya ikon yang terlihat
dalam status diciutkan.
- Kolom samping navigasi: Kolom Samping Navigasi adalah kolom yang
menampilkan 3 hingga 7 tujuan aplikasi, yang berfungsi sebagai menu utama. Setiap tujuan
memiliki label teks dan ikon opsional, dengan opsi pengelompokan item
menu untuk konteks yang lebih baik.
- Bagian bawah: Dapat memiliki satu hingga tiga tombol tindakan,
yang ideal untuk halaman seperti setelan, bantuan, atau profil.
Perilaku
- Perluasan panel navigasi: Saat diluaskan, panel navigasi
standar akan mendorong konten halaman sehingga membuat ruang untuk versi
yang diluaskan untuk navigasi.
- Pembaruan navigasi: Saat berpindah dari satu item navigasi ke item navigasi lainnya, halaman akan otomatis diperbarui ke tujuan baru.
Panel navigasi modal
Anatomi
- Bagian atas: Menampilkan logo aplikasi. Berfungsi sebagai tombol untuk beralih
profil atau memicu tindakan penelusuran. Dalam status diciutkan, hanya
ikon yang tetap terlihat di penampung atas.
- Item navigasi: Setiap item di kolom samping navigasi menampilkan
kombinasi ikon dan teks, dengan hanya ikon yang terlihat dalam
status diciutkan.
- Kolom samping navigasi: Kolom yang
menampilkan tiga hingga tujuh tujuan aplikasi, yang berfungsi sebagai menu utama. Setiap
tujuan memiliki label teks dan ikon opsional, dengan
opsi pengelompokan item menu untuk konteks yang lebih baik.
- Scrim: Untuk meningkatkan keterbacaan teks item navigasi.
- Bagian bawah: Dapat memiliki satu hingga tiga tombol tindakan,
yang ideal untuk halaman seperti setelan, bantuan, atau profil.
Perilaku
- Perluasan panel samping: Muncul sebagai overlay di
atas konten aplikasi, dengan scrim yang meningkatkan keterbacaan
saat panel samping diluaskan.
- Pembaruan navigasi: Terjadi saat pengguna
memilih item navigasi.
Scrim
Untuk panel navigasi modal, scrim di belakang
panel memastikan konten panel dapat dibaca. Anda dapat
menggunakan gradien atau permukaan solid di belakang panel navigasi untuk membuat
variasi UI yang berbeda.
Scrim gradien
Scrim solid
Spesifikasi
Penggunaan
Indikator Aktif
Indikator aktif adalah isyarat visual yang menandai tujuan panel navigasi
yang ditampilkan. Indikator biasanya diwakili oleh
bentuk latar belakang yang secara visual berbeda dari item lain di panel samping.
Indikator aktif membantu pengguna memahami posisi mereka di aplikasi dan
tujuan yang mereka jelajahi. Pastikan indikator aktif terlihat
jelas dan lebih mudah dibedakan dari item lain di panel navigasi.
Pembagi (opsional)
Pembagi dapat digunakan untuk memisahkan grup tujuan dalam panel samping
navigasi untuk pengaturan yang lebih baik. Namun, penting untuk menggunakannya seperlunya karena
terlalu banyak pemisah dapat menimbulkan gangguan visual dan menambah beban kognitif yang tidak perlu
bagi pengguna.
Badge
Badge adalah isyarat visual yang dapat ditambahkan ke item navigasi untuk memberikan
informasi tambahan. Misalnya, badge dapat digunakan untuk
menunjukkan jumlah film baru yang tersedia di aplikasi streaming. Gunakan
badge seperlunya dan hanya jika diperlukan, karena dapat
membuat UI tampak ramai dan berantakan. Saat menggunakan badge, pastikan
badge tersebut jelas dan lebih mudah dipahami serta tidak
mengganggu kemampuan pengguna untuk menavigasi aplikasi.
Badge diluaskan
Badge diciutkan
Label
Label di panel navigasi harus jelas dan ringkas sehingga
lebih mudah dibaca.
warning
Perhatian
Jika tidak dapat menghindari penggunaan label yang panjang, pangkas label menggunakan elipsis.
cancel
Larangan
Hindari penggunaan label teks panjang yang memerlukan penataan.
cancel
Larangan
Hindari membuat panel navigasi tanpa ikon, karena hal ini dapat menyulitkan pengguna untuk menavigasi aplikasi.
cancel
Larangan
Hindari mencampur item navigasi ikon dengan item navigasi non-ikon, karena hal ini dapat membuat pengalaman navigasi membingungkan bagi pengguna.
Panel navigasi adalah elemen dasar yang mewakili hierarki
aplikasi Anda dan hanya boleh digunakan untuk mencantumkan lima hingga enam tujuan
navigasi utama.
check_circle
Anjuran
Batasi jumlah tujuan navigasi utama di panel navigasi menjadi lima hingga enam untuk pengalaman pengguna yang lebih baik.
cancel
Larangan
Hindari menambahkan terlalu banyak item navigasi karena dapat membuat scroll vertikal dan mempersulit pengguna untuk menavigasi aplikasi.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Navigation drawers are essential components in any TV app as they allow users\nto access different destinations and features. A navigation drawer is the\nbackbone of the app's information architecture, providing a clear and intuitive\nway to navigate through the app.\n\nIn contrast to the mobile navigation drawer, the navigation drawer on\nTV has both expanded and collapsed states visible to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose (NavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#NavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,kotlin.Function0)) [Jetpack Compose (ModalNavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0)) | Available |\n\nHighlights\n----------\n\n- Destinations are ordered according to user importance, with frequent destinations first and related destinations grouped together.\n- A navigation rail is required for both standard and modal navigation drawers when collapsed.\n\nVariants\n--------\n\nThere are two type of navigation drawer styles:\n\n1. **Standard navigation drawer** --- Expands to create additional space for navigation, pushing the page content aside.\n2. **Modal navigation drawer** --- Appears as an overlay on top of the app's content with a scrim that helps to improve readability when the drawer is expanded.\n\nStandard navigation drawer\n--------------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** The Navigation Rail is a column that shows 3 to 7 app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Navigation drawer expansion:** When expanded the standard navigation drawers pushes the page content making space for the expanded version for the navigation.\n- **Navigation updates:** Moving from one nav item to another, the page automatically updates to the new destination.\n\nModal navigation drawer\n-----------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger a search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** Column that shows three to seven app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Scrim:** For better readability of navigation item text.\n5. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Drawer expansion:** Appears as an overlay on top of the app's content, with a scrim that improves readability when the drawer is expanded.\n- **Navigation updates:** Occur when the user selects a navigation item.\n\n### Scrim\n\nFor the modal navigation drawer, a scrim behind the\ndrawer ensures the drawer content is readable. You can\nuse a gradient or solid surface behind the navigation drawer to create different\nvariations of the UI.\n\n\nGradient scrim \n\nSolid scrim\n\n\u003cbr /\u003e\n\nSpec\n----\n\nUsage\n-----\n\n\n### Active Indicator\n\nThe active indicator is a visual cue that highlights the navigation drawer\ndestination that is displayed. The indicator is typically represented by a\nbackground shape that is visually distinct from the other items in the drawer.\nThe active indicator helps users understand where they are in the app and which\ndestination they are browsing. Ensure that the active indicator is clearly\nvisible and easier to distinguish from the other items in the navigation drawer. \n\n\u003cbr /\u003e\n\n\n### Dividers (optional)\n\nDividers can be used to separate groups of destinations within the navigation\ndrawer for better organization. However, it's important to use them sparingly as\ntoo many dividers can create visual noise and add unnecessary cognitive overload\nfor users. \n\n\u003cbr /\u003e\n\n### Badges\n\nBadges are visual cues that can be added to navigation items to provide\nadditional information. For example, a badge could be used to\nindicate the number of new movies available in a streaming app. Use\nbadges sparingly and only when necessary, as they can\nmake the UI appear busy and cluttered. When using badges, ensure that\nthey are clear and easier to understand and that they don't\ninterfere with the user's ability to navigate the app.\n\n\nBadge expanded \n\nBadge collapsed\n\n\u003cbr /\u003e\n\n### Labels\n\nLabels in the navigation drawer should be clear and concise so that they\nare easier to read. \nwarning\n\n### Caution\n\nIf it's impossible to avoid using long labels, truncate the label using an ellipsis. \ncancel\n\n### Don't\n\nAvoid using long text labels that require wrapping. \ncancel\n\n### Don't\n\nAvoid creating a navigation drawer without icons, as this can make it difficult for users to navigate the app. \ncancel\n\n### Don't\n\nAvoid mixing icon navigation items with non-icon navigation items, as this can make the navigation experience confusing for users.\n\nNavigation drawers are foundational elements that represent your app's\nhierarchy and should be used to list only five to six primary\nnavigation destinations. \ncheck_circle\n\n### Do\n\nLimit the number of main navigation destinations in the navigation drawer to five to six for a better user experience. \ncancel\n\n### Don't\n\nAvoid adding too many navigation items as this can create a vertical scroll and make it harder for users to navigate the app."]]
