Implementation:TobikoData Sqlmesh ModuleNavigation

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components, Navigation
Last Updated	2026-02-07 20:00 GMT

Overview

A dynamic navigation menu component that renders available SQLMesh modules with icons, badges, and active states.

Description

ModuleNavigation is a React component that generates the main application navigation based on feature availability. It reads from the global store context to determine which modules are enabled (hasEditor, hasDataCatalog, hasErrors, hasPlans, etc.) and renders navigation links only for available features. Each module is represented by a ModuleLink component with both outline and solid Heroicons variants that swap based on active state. The component includes dynamic badge indicators that display counts (e.g., number of models in Data Catalog, number of errors in Errors module) using absolute positioning with small circular badges. It integrates with the notification center to show real-time error counts with danger styling when errors are present. The navigation uses semantic colors (primary for File Explorer, success for Plan, danger for Errors) to provide visual cues about different functional areas.

Usage

Use this component as the primary navigation for the SQLMesh UI. It automatically adapts to the available features in the current environment, hiding modules that aren't enabled. The component provides visual feedback through hover states, active indicators, and dynamic badges that help users understand the current state of the application.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/moduleNavigation/ModuleNavigation.tsx

Signature

export default function ModuleNavigation({
  className,
}: {
  className?: string
}): JSX.Element

Import

import ModuleNavigation from '@components/moduleNavigation/ModuleNavigation'

I/O Contract

Inputs

Name	Type	Required	Description
className	string	No	Additional CSS classes to apply to the navigation container

Outputs

Name	Type	Description
JSX.Element	React component	Navigation menu with links to enabled modules and dynamic badges

Usage Examples

import ModuleNavigation from '@components/moduleNavigation/ModuleNavigation'

// In a sidebar layout
function Sidebar() {
  return (
    <aside className="w-16 h-full bg-theme">
      <ModuleNavigation className="flex flex-col items-center py-4" />
    </aside>
  )
}

// The component automatically renders only available modules:
// - File Explorer (if hasEditor)
// - Data Catalog with model count (if hasDataCatalog)
// - Errors with error count (if hasErrors)
// - Plan (if hasPlans)
// - Tests (if hasTests)
// - Audits (if hasAudits)
// - Data (if hasData)
// - Lineage (if hasLineage)

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack