Open source

Menu

Navigation menu item component with routing support, focus management, and remote control interaction.

Import

import { Menu } from '@smart-tv/ui';

Basic Usage

Create a simple menu item with click handler.

<Menu
  focusKey="home-menu"
  onEnterPress={() => console.log('Home selected')}
>
  Home
</Menu>

With Navigation (href)

Menu items can navigate to routes using the href prop. This integrates with your router automatically.

<Menu
  focusKey="movies-menu"
  href="/movies"
>
  Movies
</Menu>

<Menu
  focusKey="shows-menu"
  href="/shows"
>
  TV Shows
</Menu>

External Links

Open external links in a new window with target and rel props.

<Menu
  focusKey="external-menu"
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  External Site
</Menu>

Styled Menu Items

Customize menu appearance and focus states.

<Menu
  focusKey="styled-menu"
  className="px-4 py-3 text-gray-700 dark:text-gray-200"
  active="bg-blue-500 text-white font-bold"
  href="/profile"
>
  Profile
</Menu>

Menu with Icons

Include icons or other elements within menu items.

<Menu
  focusKey="settings-menu"
  className="flex items-center gap-3 px-4 py-3"
  active="bg-blue-500 text-white"
  href="/settings"
>
  <SettingsIcon />
  <span>Settings</span>
</Menu>

Render Props Pattern

Dynamically render menu content based on focus state.

<Menu
  focusKey="dynamic-menu"
  href="/movies"
>
  {({ focused }) => (
    <div className={`flex items-center gap-2 ${focused ? 'text-blue-500' : ''}`}>
      {focused && '▶'}
      <span>Movies</span>
    </div>
  )}
</Menu>

Mouse Hover Support

Enable hover support for hybrid TV/web apps.

<Menu
  focusKey="hover-menu"
  hover={true}
  href="/search"
>
  Search
</Menu>

Props

Prop	Type	Default	Description
focusKey	string	-	Required. Unique identifier for navigation
href	string	-	URL to navigate to on Enter press
target	string	-	Link target (_blank, _self, etc.)
rel	string	-	Link relationship (noopener, etc.)
onEnterPress	function	-	Called when Enter/OK is pressed
onEnterRelease	function	-	Called when Enter/OK is released
onFocus	function	-	Called when menu receives focus
onBlur	function	-	Called when menu loses focus
onArrowPress	function	-	Called when arrow keys are pressed
className	string	-	CSS classes for the menu
active	string	-	CSS classes when focused
disabled	boolean	false	Disable menu interactions
hover	boolean	false	Enable mouse hover support
payload	any	-	Data passed to event handlers
children	ReactNode \| function	-	Menu content or render function

Best Practices

Use unique focusKey values for each menu item
Provide clear visual feedback with the active prop
Use href for navigation to integrate with your router
Group related menu items in a Navbar or Sidebar component
Make menu items large enough for easy remote control selection (min 48px height)