This article delves into the TV side navigation (side nav) design and functionality, focusing on its dynamic collapsed and expanded states, navigation controls, and customization. It also discusses profile management.

For AXIS Presentation Manager configuration details, visit the TV side navigation bar configuration article.

Note: The side navigation is designed to support a single-level menu structure with up to eight items configured from Presentation Manager.

The following topics are covered:

• Side nav controls
• Profile icon placement
• Account details
• Right-to-Left support

Side navigation controls

The collapsed state of the TV side nav allows users to see a minimalistic version of the navigation bar, which changes to an expanded state when selected.

In its expanded state, the side nav automatically highlights the currently active page. If the user moves away from the side nav, it transitions back to a collapsed state in which the highlighted icon indicates the page in focus.

The side nav displays consistently across all feature pages as enabled from Presentation Manager, excluding subpages.

Collapsed side nav example:

Expanded side nav example:

Navigation controls

In the expanded view, users can scroll through menu items vertically using the remote control. The selected item is highlighted with a white background (see example above).

Pressing right collapses the side nav; this action is reversed in Right-to-Left (RTL) layouts. For the back button:

• If focus is on the first menu item, upon navigating back, a modal prompts to confirm exiting the app.
• If focus is on any other menu item, upon navigating back, focus reverts to the first menu item.

Presentation Manager settings

For side navigation, operators can customize their menu via a new side menu, TV Side Nav. The following configurations are available:

1. Menu items: Add or remove menu items, complete with redirection links
2. Logo placement: Assign specific icons to various menu items

Note: Use variants to further customize the display of the side navigation.

Profile icon and logo placement

Set the logo position via Presentation Manager:

• Start refers to the logo being positioned within the nav
• End refers to the logo being positioned on the opposite side to the nav

Choose from four predefined positions for logo placement:

• Start, Bottom (default)
• Start, Top
• End, Top
• End, Bottom

Logo position Start, Bottom (default) example:

Logo position Start, Top example:

Logo position End, Top example:

Logo position End, Bottom example:

Account details

The profile section in the TV side nav displays ‌the user's login status, allowing users to manage their accounts easily. When not logged in and the side nav is collapsed, a generic smile emoji icon displays by default.

If logged in, the collapsed side nav shows an icon with the user's initials. Selecting the profile icon when the side nav is expanded takes the user to the profile selection page.

If logged out, the side nav when expanded shows a generic icon with Sign In UX for logged-out users. Selecting Sign In takes the user to the sign-in page.

Account page from side nav example:

Note: Up to 10 profiles can be displayed or created in a single row to accommodate a new add button and simplify navigation.

Right-to-Left support

The RTL support in the side navigation allows users who select an RTL language to navigate the app. When an RTL language is enabled, the side navigation automatically aligns to the right side of the screen.

The functionality of the back button remains unchanged, ensuring consistency with Left-to-Right (LTR) languages. However, other directional keys are reversed: pressing the right key opens the side navigation, and pressing the left key collapses it,

Collapsed right-hand side nav example:

Right-hand side nav expanded example: