Navbar

A top navigation bar component for app-level navigation with logo, menu items, and actions.

Import

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

Basic Usage

Create a simple navbar with logo and navigation items.

<Navbar focusKey="navbar">
  <Navbar.Logo>My App</Navbar.Logo>
  <Navbar.Menu>
    <Navbar.Item focusKey="home" onEnterPress={() => navigate('/')}>
      Home
    </Navbar.Item>
    <Navbar.Item focusKey="browse" onEnterPress={() => navigate('/browse')}>
      Browse
    </Navbar.Item>
    <Navbar.Item focusKey="search" onEnterPress={() => navigate('/search')}>
      Search
    </Navbar.Item>
  </Navbar.Menu>
</Navbar>

With Action Buttons

Add action buttons like settings or user profile.

<Navbar focusKey="navbar-with-actions">
  <Navbar.Logo>My App</Navbar.Logo>
  <Navbar.Menu>
    <Navbar.Item focusKey="home">Home</Navbar.Item>
    <Navbar.Item focusKey="browse">Browse</Navbar.Item>
  </Navbar.Menu>
  <Navbar.Actions>
    <Button focusKey="settings-btn" variant="ghost">
      <SettingsIcon />
    </Button>
    <Button focusKey="profile-btn" variant="ghost">
      <UserIcon />
    </Button>
  </Navbar.Actions>
</Navbar>

Sticky Position

Make the navbar sticky at the top during scroll.

<Navbar
  focusKey="sticky-navbar"
  sticky={true}
  className="sticky top-0 z-50"
>
  <Navbar.Logo>My App</Navbar.Logo>
  <Navbar.Menu>
    <Navbar.Item focusKey="home">Home</Navbar.Item>
  </Navbar.Menu>
</Navbar>

Custom Styling

Customize navbar appearance with themes and colors.

<Navbar
  focusKey="custom-navbar"
  className="bg-gradient-to-r from-purple-600 to-blue-600"
>
  <Navbar.Logo className="text-white font-bold">
    Brand
  </Navbar.Logo>
  <Navbar.Menu className="text-white">
    <Navbar.Item
      focusKey="home"
      active="bg-white/20 rounded-md"
    >
      Home
    </Navbar.Item>
  </Navbar.Menu>
</Navbar>

Best Practices

Keep the navbar simple with 4-6 primary navigation items
Place most important actions on the right side
Use consistent styling across your application
Make the logo focusable to return home
Ensure navbar is always accessible via remote control