導覽匣
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
導覽匣是任何 TV 應用程式中不可或缺的元件，因為它可讓使用者存取不同的目的地和功能。導覽匣是應用程式資訊架構的骨幹，可提供清晰直覺的應用程式瀏覽方式。
與行動裝置的導覽匣不同，電視上的導覽匣會同時顯示展開和收合狀態，供使用者查看。
資源
重點特色
- 目的地會依使用者的重要性排序，最常造訪的目的地會排在最前面，相關目的地則會分組顯示。
- 標準和模態導覽匣在收合時，都需要導覽軌。
版本
導覽匣樣式分為兩種：
- 標準導覽匣：展開後可為導覽功能提供額外空間，將頁面內容推到旁邊。
- 模態導覽匣：會以疊加的方式顯示在應用程式內容上方，並搭配遮罩，有助於在展開導覽匣時提高可讀性。
標準導覽匣
圖解
- 頂端部分：顯示應用程式標誌。可做為切換設定檔或觸發搜尋動作的按鈕。在收合狀態下，頂層容器中只會顯示圖示。
- 導覽項目：導覽邊欄中的每個項目都會結合圖示和文字，且在收合狀態下只會顯示圖示。
- 導覽邊欄：導覽邊欄是一欄顯示 3 到 7 個應用程式目的地的列，可做為主選單。每個目的地都有文字標籤和選用圖示，可選擇將選單項目分組，以便提供更貼近情境的內容。
- 底部區段：可放置一到三個動作按鈕，非常適合設定、說明或個人資料等頁面。
行為
- 導覽匣展開：展開標準導覽匣時，系統會推送頁面內容，為導覽匣的展開版本騰出空間。
- 導覽更新：從一個導覽項目移動到另一個導覽項目時，頁面會自動更新至新目的地。
強制回應導覽匣
圖解
- 頂端部分：顯示應用程式標誌。可做為切換設定檔或觸發搜尋動作的按鈕。在收合狀態下，頂層容器中只會顯示圖示。
- 導覽項目：導覽邊欄中的每個項目都會結合圖示和文字，且在收合狀態下只會顯示圖示。
- 導覽列：顯示三到七個應用程式目的地的資料欄，做為主選單。每個目的地都有文字標籤和選用圖示，您可以選擇將選單項目分組，以便提供更貼近情境的內容。
- 預覽畫面：可讓使用者更容易閱讀導覽項目文字。
- 底部區段：可放置一到三個動作按鈕，適合設定、說明或個人資料等頁面。
行為
- 展開抽屜：會在應用程式內容上方顯示重疊層，並在展開抽屜時顯示遮罩，以利閱讀。
- 導覽更新：使用者選取導覽項目時發生。
紗罩
對於強制回應導覽匣，導覽匣後方的遮罩可確保導覽匣內容可讀。您可以使用導覽匣後方的漸層或實心表面，建立不同的 UI 變化版本。
漸層紗罩
實體紗罩
規格
用量
使用中指標
活動指標是一種視覺提示，用來強調顯示的導覽匣目的地。指標通常會以背景圖形表示，與抽屜中的其他項目在視覺上有所區隔。活動指標可協助使用者瞭解自己在應用程式中的位置，以及正在瀏覽的目的網頁。請確保活動指標清晰可見，並能輕易與導覽匣中的其他項目區分。
分隔線 (選用)
您可以使用分隔線，在導覽匣中分隔不同群組的目的地，以便進行整理。不過，請務必謹慎使用分隔符，因為分隔符過多可能會造成視覺干擾，並為使用者帶來不必要的認知負荷。
徽章
徽章是可新增至導覽項目的視覺提示，用於提供額外資訊。舉例來說，您可以使用徽章來表示串流應用程式中可用的全新電影數量。徽章可能會讓使用者介面看起來雜亂，因此請謹慎使用，並僅在必要時使用。使用徽章時，請確保徽章清晰易懂，且不會妨礙使用者瀏覽應用程式。
已展開的徽章
徽章已收合
標籤
導覽匣中的標籤應簡明扼要，方便使用者閱讀。
warning
注意
如果無法避免使用長標籤，請使用省略號截斷標籤。
cancel
錯誤做法
避免使用需要換行的長文字標籤。
cancel
錯誤做法
請勿建立沒有圖示的導覽匣，否則使用者可能會難以瀏覽應用程式。
cancel
錯誤做法
請勿混用圖示導覽項目和非圖示導覽項目，否則可能會讓使用者對導覽體驗感到困惑。
導覽匣是代表應用程式階層的基礎元素，應只用於列出五到六個主要導覽目的地。
check_circle
正確做法
為提供更優質的使用者體驗，請將導覽匣中的主導覽目的地數量限制在五到六個。
cancel
錯誤做法
避免加入過多導覽項目，因為這可能會導致垂直捲動，使用者也會更難瀏覽應用程式。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-27 (世界標準時間)。
[null,null,["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],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."]]
