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.

The menu is part of the top bar, so it is hidden when topBarEnabled is false.

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, SYMBOL_TYPE, type MenuPage } from '@chartspire/ui'

const chart = new ChartSpire({
  container: 'chart',
  symbol: { symbol: 'BTCUSDT', type: SYMBOL_TYPE.CRYPTO },
  interval: { multiplier: 1, timespan: 'day', text: '1D' },
  dataFeed: myDataFeed,

  // Enable the menu system
  menuPagesEnabled: true,

  // Define menu pages
  menuPages: [
    { name: 'Home', path: '/' },
    { name: 'Dashboard', path: '/dashboard' },
    { name: 'Settings', path: '/settings' }
  ]
})

When a menu item with a non-empty path is selected, ChartSpire navigates automatically via window.location.href. Use menuPageClickCallback only for side effects (analytics, auth, SPA routing). Do not set window.location.href again in the callback.

If menuPages is empty or omitted, the dropdown shows "No pages available". Display names longer than 25 characters are truncated in the UI.

Configuration Properties

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

MenuPage Interface

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

Path Types and Navigation

The menu system supports different types of paths. Paths are assigned to window.location.href and resolve like normal browser URLs.

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

Resolved relative to the current page URL:

menuPages: [
  { name: 'Help', path: 'help' },           // e.g. /dashboard → /help
  { name: 'About', path: '../about' }      // e.g. /app/settings → /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: side effects only — navigation happens automatically
    gtag('event', 'menu_navigation', {
      page_name: page.name,
      page_path: page.path
    })
  }
})

Example 2: Sign-Out Implementation

Use an empty path to skip auto-navigation for actions that are not page links:

const menuPages: MenuPage[] = [
  { name: 'Dashboard', path: '/dashboard' },
  { name: 'Account Settings', path: '/account' },
  { name: 'Sign Out', path: '' } // Empty path skips auto-navigation
]

const chart = new ChartSpire({
  // ... other options
  menuPagesEnabled: true,
  menuPages: menuPages,
  menuPageClickCallback: (page) => {
    if (page.name === 'Sign Out') {
      handleSignOut()
    }
  }
})