Menu System

ChartSpire includes a customizable menu system that allows you to add navigation links to the topbar. The menu appears as a three-dot icon on the right side of the topbar and provides dropdown navigation to different pages in your application.

Why use the Menu System?

You may want the chart to be full screen taking up all the available space on the window. As such you might not have space for a navbar. The menu component allows you to add static paths to easily navigate between.

Basic Configuration

Enabling the Menu

The menu is disabled by default. To enable it, set menuPagesEnabled: true:

import ChartSpire, { type MenuPage } from '@chartspire/chartspire'

const chart = new ChartSpire({
  container: 'chart',
  symbol: { symbol: 'BTCUSDT', type: 'CRYPTO' },
  interval: { multiplier: 1, timespan: 'day', text: '1D' },
  defaultDataFeed: new DefaultDataFeed(),
  
  // Enable the menu system
  menuPagesEnabled: true,
  
  // Define menu pages
  menuPages: [
    { name: 'Home', path: '/' },
    { name: 'Dashboard', path: '/dashboard' },
    { name: 'Settings', path: '/settings' }
  ],
  
  // Handle menu clicks
  menuPageClickCallback: (page) => {
    console.log(`Navigating to: ${page.name} (${page.path})`)
    // Browser automatically navigates to page.path
  }
})

Configuration Properties

Property	Type	Default	Description
menuPagesEnabled	boolean	false	Enable/disable the menu dropdown in the topbar
menuPages	MenuPage[]	undefined	Array of menu pages to display
menuPageClickCallback	(page: MenuPage) => void	undefined	Callback when user clicks a menu item

MenuPage Interface

interface MenuPage {
  name: string    // Display name (e.g., 'Home', 'Settings')
  path: string    // Navigation path (e.g., '/', '/settings')
}

Path Types and Navigation

The menu system supports different types of paths:

Absolute Paths

Start from your domain root:

menuPages: [
  { name: 'Home', path: '/' },              // → yoursite.com/
  { name: 'Dashboard', path: '/dashboard' }, // → yoursite.com/dashboard
  { name: 'Settings', path: '/settings' }   // → yoursite.com/settings
]

Relative Paths

Relative to current URL:

menuPages: [
  { name: 'Help', path: 'help' },           // → current-url/help
  { name: 'About', path: '../about' }      // → parent-directory/about
]

External URLs

Navigate to different domains:

menuPages: [
  { name: 'Documentation', path: 'https://docs.example.com' },
  { name: 'Support', path: 'https://support.example.com' }
]

Examples

Example 1: Basic Navigation Menu

const menuPages: MenuPage[] = [
  { name: 'Home', path: '/' },
  { name: 'Portfolio', path: '/portfolio' },
  { name: 'Analytics', path: '/analytics' },
  { name: 'Settings', path: '/settings' }
]

const chart = new ChartSpire({
  // ... other options
  menuPagesEnabled: true,
  menuPages: menuPages,
  menuPageClickCallback: (page) => {
    // Optional: Add analytics tracking
    gtag('event', 'menu_navigation', {
      page_name: page.name,
      page_path: page.path
    })
    
    // Browser navigates automatically
  }
})

Example 2: Sign-Out Implementation

const menuPages: MenuPage[] = [
  { name: 'Dashboard', path: '/dashboard' },
  { name: 'Account Settings', path: '/account' },
  { name: 'Sign Out', path: '' } // Empty path for sign-out
]

const chart = new ChartSpire({
  // ... other options
  menuPagesEnabled: true,
  menuPages: menuPages,
  menuPageClickCallback: (page) => {
    if (page.name === 'Sign Out') {
      handleSignOut()
      return
    }
    
    // Normal navigation for other pages
    window.location.href = page.path
  }
})