Navigation

A comprehensive navigation component that handles app-wide navigation patterns across Web, iOS, and Android platforms.

Features

• Responsive navigation (mobile + desktop)
• Tab-based navigation
• Drawer/sidebar navigation
• Nested navigation support
• Active route highlighting
• Platform-native patterns

Usage

Web (React)

import { Navigation, NavItem } from '@cuppa/ui'

function App() {
  return (
    <Navigation>
      <NavItem href="/" icon={<HomeIcon />}>
        Home
      </NavItem>
      <NavItem href="/components" icon={<ComponentsIcon />}>
        Components
      </NavItem>
      <NavItem href="/docs" icon={<DocsIcon />}>
        Documentation
      </NavItem>
      <NavItem href="/blog" icon={<BlogIcon />}>
        Blog
      </NavItem>
    </Navigation>
  )
}

iOS (SwiftUI)

import CuppaUI

struct ContentView: View {
  var body: some View {
    CuppaNavigation {
      CuppaNavItem(destination: HomeView()) {
        Label("Home", systemImage: "house")
      }

      CuppaNavItem(destination: ComponentsView()) {
        Label("Components", systemImage: "square.grid.2x2")
      }

      CuppaNavItem(destination: DocsView()) {
        Label("Docs", systemImage: "book")
      }

      CuppaNavItem(destination: BlogView()) {
        Label("Blog", systemImage: "text.bubble")
      }
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaNavigation
import com.cuppa.ui.components.NavItem

@Composable
fun MainScreen() {
  CuppaNavigation {
    NavItem(
      route = "home",
      icon = Icons.Default.Home,
      label = "Home"
    )

    NavItem(
      route = "components",
      icon = Icons.Default.GridView,
      label = "Components"
    )

    NavItem(
      route = "docs",
      icon = Icons.Default.Book,
      label = "Docs"
    )

    NavItem(
      route = "blog",
      icon = Icons.Default.Article,
      label = "Blog"
    )
  }
}

Navigation Patterns

Tab Navigation

Bottom tabs (mobile) or top tabs (desktop).

Best for: Primary app sections, 3-5 items

Drawer Navigation

Side drawer that slides in.

Best for: Secondary navigation, settings, account

Stack Navigation

Hierarchical navigation with back button.

Best for: Drill-down flows, multi-step processes

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | string | 'tabs' | Navigation style (tabs, drawer, stack) | | position | string | 'bottom' | Tab position (bottom, top) | | items | array | [] | Navigation items | | activeRoute | string | - | Current active route |

Examples

Bottom Tab Navigation

<Navigation variant="tabs" position="bottom">
  <NavItem href="/" icon={<HomeIcon />}>Home</NavItem>
  <NavItem href="/search" icon={<SearchIcon />}>Search</NavItem>
  <NavItem href="/profile" icon={<UserIcon />}>Profile</NavItem>
</Navigation>

Drawer Navigation

<Navigation variant="drawer">
  <NavItem href="/settings">Settings</NavItem>
  <NavItem href="/help">Help</NavItem>
  <NavItem href="/about">About</NavItem>
</Navigation>

Nested Navigation

<Navigation>
  <NavItem href="/components">
    Components
    <NavItem href="/components/tokens">Tokens</NavItem>
    <NavItem href="/components/modules">Modules</NavItem>
  </NavItem>
</Navigation>

Platform Adaptations

Web

• Desktop: Horizontal top navigation
• Mobile: Bottom tab bar or hamburger menu

iOS

• Uses UITabBar for bottom navigation
• SwiftUI NavigationView for stack navigation
• Native iOS animations and gestures

Android

• Material Design BottomNavigationBar
• NavigationDrawer for side menus
• Material motion and transitions

Accessibility

• Keyboard navigation support
• ARIA labels and roles
• Screen reader announcements
• Focus management
• Semantic HTML (nav element)

Best Practices

1. Limit tabs to 3-5 items for clarity
2. Use icons + labels for better recognition
3. Highlight active navigation item
4. Use drawer for secondary navigation
5. Respect platform navigation patterns
6. Test on actual devices for feel