Skip to content

Navigation & Layout Components (Tier 2)

Purpose: Site navigation and layout wrappers
Tier: 2 (Standard Documentation)
Count: 6 components

1. HomeNavbar

Purpose: Marketing site header
Used In: Homepage, public pages

Features:

  • Logo
  • Nav links (Features, Pricing, About, Contact)
  • Login/Signup CTAs
  • Mobile hamburger menu
  • Sticky header

2. Navbar

Purpose: Application header (authenticated)
Used In: Dashboard pages

Features:

  • User profile dropdown
  • Notifications (possible)
  • Quick actions
  • Logout button
  • Branding

3. Sidebar

Purpose: Chatbot wizard navigation
Used In: All 3 wizard pages

Props:

interface SidebarProps {
  activeTab: TabType;
  onTabChange: (tab: TabType) => void;
  tabs: string[];
}

Features:

  • Tab navigation
  • Progress indicators
  • Active state highlighting
  • Responsive (collapsible on mobile)

4. BillingSidebar

Purpose: Billing section navigation
Used In: Billing pages

Features:

  • Subscription Plan
  • Payment Mode
  • Invoice Center
  • Dashboard link
  • Expandable dropdown

5. NavigationWrapper

Purpose: Layout wrapper with nav
Type: HOC or layout component

Features:

  • Combines navbar + content
  • Footer placement
  • Responsive container

6. BackButton

Purpose: Simple back navigation
Used In: Various pages

Props:

interface BackButtonProps {
  label?: string;
  onClick?: () => void;
}

Default: Uses router.back()
Custom: Can override with onClick

Purpose: Site footer
Used In: All pages

Features:

  • Links (About, Privacy, Terms)
  • Social media icons
  • Copyright notice
  • Contact info

"Guiding users through every journey."