How Wide Should a TV Navigation Sidebar Be?
A content-led sizing method for a permanently compact icon-and-label TV sidebar whose focus never shifts the main page.
In short: There is no universal sidebar width. Use the smallest stable width that fits the icon, full real-world label, focus treatment, internal gap, padding, and localisation reserve at viewing distance. Keep that width unchanged when focus enters the sidebar so the content grid and spatial navigation do not move.
A compact sidebar succeeds when viewers can identify every destination and the main page keeps most of the screen. It fails when “compact” means cropped labels or when focus triggers an expanding drawer over the content.
Calculate from content, not a mockup number
The minimum content-led width is:
outer padding + icon box + icon-label gap + longest rendered label + focus and safety reserve + outer padding
Measure text in the actual typeface, weight, and size. Include likely localisation and accessibility text-spacing stress cases. Do not use a single English label set as the maximum.
Build the width worksheet
| Component | Measured or reserved space |
|---|---|
| Left padding | |
| Focus outline or background | |
| Icon box | |
| Icon-label gap | |
| Longest verified label | |
| Translation reserve | |
| Right padding | |
| Stable content boundary |
The result is a candidate, not a final answer. Render it on the target TV environment and verify from normal viewing position.
Keep icon and text together
Icons alone require memory and can become ambiguous. A compact icon-and-text menu keeps destinations explicit. W3C consistent-identification guidance supports components that retain consistent meaning, while focus-visible guidance reinforces a perceivable focused state.
Do not hide labels until focus or rely on a tooltip. The remote user needs to choose a destination before activation, and focus movement should not cause width changes.
Make focus, active page, and selection distinct
- Focus: where the next remote action applies.
- Active page: which destination is currently open.
- Pressed or selected state: the immediate activation response.
Use combinations of outline, background, scale, weight, or icon treatment. Ensure the focused row’s visual effect fits within the reserved sidebar width and is not clipped.
Preserve page geometry
A sidebar that expands on focus shifts the content grid, changes apparent adjacency, and can invalidate D-pad target calculations. Keep the boundary stable. If more explanation is required, place it in a separate help surface rather than changing navigation width.
Use the TV information-density method to recover space from duplicate headers or oversized padding instead of removing labels from navigation.
Test the longest and worst-case labels
Include short, long, two-word, unbroken, translated, and missing labels. Define whether labels wrap, scale, or truncate. For primary navigation, preserving the full label is preferable; if a fallback is unavoidable, ensure the focused destination’s complete name is available without hover.
Apply the long-title handling principles to labels, but recognise that navigation text is more critical than card metadata and should receive a stronger no-truncation priority.
Run D-pad task tests
From page content:
- press Left to enter navigation;
- confirm focus is visible and the grid stays fixed;
- move through every item with Up and Down;
- verify the full label from viewing distance;
- select a destination;
- confirm active-page state;
- press Right and return to a meaningful content target;
- repeat from top, middle, and bottom rows.
Android TV app quality guidance expects remote-friendly navigation. Exact Norva paths and device behavior require verification in the current TV release.
Coordinate with filters and overlays
The sidebar must not collide with compact TV filters, detail panels, notifications, or overscan-safe content boundaries in the target implementation. Test open and closed layers, not only the base page.
Original evidence: width worksheet
Render three candidate widths using the same real labels and states. Record full-label fit, focus clipping, content shift, and D-pad return target. Select the narrowest candidate that passes every critical field.
The worksheet supports one design system and language set. It does not establish a universal pixel recommendation for every TV.
Common mistakes and limitations
- Choosing width from one mockup.
- Hiding every label behind focus.
- Letting focus expand the menu.
- Clipping the outline at the boundary.
- Using an icon-only state for unfamiliar destinations.
- Ignoring translations and text-spacing changes.
Frequently asked questions
Should the sidebar ever collapse to icons only?
Only when current usability evidence supports it and every destination remains understandable. A stable icon-and-text layout is safer for primary navigation.
Can labels wrap to two lines?
They can, but test row height, focus movement, and vertical capacity. Full single-line labels may produce a cleaner spatial graph when width permits.
Is the longest label always the deciding factor?
It is one critical factor. Focus effects, padding, localisation, content boundary, and viewing-distance readability also determine the final width.