Smart TV

Sidebar

A collapsible side navigation panel with hierarchical menu support for TV applications.

Import

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

Basic Usage

Create a basic sidebar with navigation items.

<Sidebar focusKey="sidebar">

  <Sidebar.Item focusKey="home" icon={<HomeIcon />}>

    Home

  </Sidebar.Item>

  <Sidebar.Item focusKey="browse" icon={<BrowseIcon />}>

    Browse

  </Sidebar.Item>

  <Sidebar.Item focusKey="library" icon={<LibraryIcon />}>

    My Library

  </Sidebar.Item>

  <Sidebar.Item focusKey="settings" icon={<SettingsIcon />}>

    Settings

  </Sidebar.Item>

</Sidebar>

Collapsible Sidebar

Toggle between expanded and collapsed states.

const [collapsed, setCollapsed] = useState(false);



<Sidebar

  focusKey="collapsible-sidebar"

  collapsed={collapsed}

  onToggle={() => setCollapsed(!collapsed)}

>

  <Sidebar.Item focusKey="home" icon={<HomeIcon />}>

    Home

  </Sidebar.Item>

  <Sidebar.Item focusKey="browse" icon={<BrowseIcon />}>

    Browse

  </Sidebar.Item>

</Sidebar>

Grouped Items

Organize sidebar items into logical groups.

<Sidebar focusKey="grouped-sidebar">

  <Sidebar.Group title="Main">

    <Sidebar.Item focusKey="home">Home</Sidebar.Item>

    <Sidebar.Item focusKey="browse">Browse</Sidebar.Item>

  </Sidebar.Group>



  <Sidebar.Group title="Library">

    <Sidebar.Item focusKey="favorites">Favorites</Sidebar.Item>

    <Sidebar.Item focusKey="watchlist">Watchlist</Sidebar.Item>

  </Sidebar.Group>



  <Sidebar.Group title="Settings">

    <Sidebar.Item focusKey="account">Account</Sidebar.Item>

    <Sidebar.Item focusKey="preferences">Preferences</Sidebar.Item>

  </Sidebar.Group>

</Sidebar>

Best Practices

  • Use icons for better recognition when collapsed
  • Group related items for better organization
  • Keep the sidebar width consistent
  • Provide visual feedback for the active item
  • Consider auto-collapsing on small screens