Whitelabel Navigation System

Time Estimate: 30 minutes | Difficulty: Intermediate | Prerequisites: Understanding of React components and Ring Platform structure

Ring Platform uses a clean whitelabel navigation architecture that automatically selects the correct navigation variant based on project configuration. This guide explains how to create custom navigation components for your Ring clone.

Architecture Overview

Navigation Component Flow

The system separates the public API (DesktopNavigation) from variant implementations (project-specific navigation components). Wrapper components always import the public API, never the variants directly.

File Structure

components/navigation/
├── desktop-navigation.tsx    ← PUBLIC API (import this everywhere)
├── desktop-sidebar.tsx       ← Default Ring Platform variant
├── vikka-desktop-navigation.tsx  ← VIKKA News variant
├── navigation.tsx            ← Orchestrator component
└── bottom-navigation.tsx     ← Mobile navigation

config/
└── navigation.config.ts      ← Client-safe configuration

Important: Never import desktop-sidebar.tsx or project-specific navigation directly. Always use DesktopNavigation from desktop-navigation.tsx.

Configuration

Navigation Config File

Create or edit config/navigation.config.ts:

config/navigation.config.ts

typescript

Instance Config (Optional)

For full whitelabel configuration, create :

Whitelabel Navigation System

Time Estimate: 30 minutes | Difficulty: Intermediate | Prerequisites: Understanding of React components and Ring Platform structure

Ring Platform uses a clean whitelabel navigation architecture that automatically selects the correct navigation variant based on project configuration. This guide explains how to create custom navigation components for your Ring clone.

Architecture Overview

Navigation Component Flow

The system separates the public API (DesktopNavigation) from variant implementations (project-specific navigation components). Wrapper components always import the public API, never the variants directly.

File Structure

components/navigation/
├── desktop-navigation.tsx    ← PUBLIC API (import this everywhere)
├── desktop-sidebar.tsx       ← Default Ring Platform variant
├── vikka-desktop-navigation.tsx  ← VIKKA News variant
├── navigation.tsx            ← Orchestrator component
└── bottom-navigation.tsx     ← Mobile navigation

config/
└── navigation.config.ts      ← Client-safe configuration

Important: Never import desktop-sidebar.tsx or project-specific navigation directly. Always use DesktopNavigation from desktop-navigation.tsx.

Configuration

Navigation Config File

Create or edit config/navigation.config.ts:

config/navigation.config.ts

typescript

Instance Config (Optional)

For full whitelabel configuration, create :

Whitelabel Navigation System

Time Estimate: 30 minutes | Difficulty: Intermediate | Prerequisites: Understanding of React components and Ring Platform structure

Ring Platform uses a clean whitelabel navigation architecture that automatically selects the correct navigation variant based on project configuration. This guide explains how to create custom navigation components for your Ring clone.

Architecture Overview

Navigation Component Flow

The system separates the public API (DesktopNavigation) from variant implementations (project-specific navigation components). Wrapper components always import the public API, never the variants directly.

File Structure

components/navigation/
├── desktop-navigation.tsx    ← PUBLIC API (import this everywhere)
├── desktop-sidebar.tsx       ← Default Ring Platform variant
├── vikka-desktop-navigation.tsx  ← VIKKA News variant
├── navigation.tsx            ← Orchestrator component
└── bottom-navigation.tsx     ← Mobile navigation

config/
└── navigation.config.ts      ← Client-safe configuration

Important: Never import desktop-sidebar.tsx or project-specific navigation directly. Always use DesktopNavigation from desktop-navigation.tsx.

Configuration

Navigation Config File

Create or edit config/navigation.config.ts:

config/navigation.config.ts

typescript

Instance Config (Optional)

For full whitelabel configuration, create :

whitelabel/instance.config.json

whitelabel/instance.config.json

whitelabel/instance.config.json

1

Create your navigation component:

Create a new file in components/navigation/ with your project name:

components/navigation/myproject-desktop-navigation.tsx

typescript

2

Register your variant in desktop-navigation.tsx:

components/navigation/desktop-navigation.tsx

typescript

3

Update the type definition:

Add your variant to the type in config/navigation.config.ts:

config/navigation.config.ts

typescript

4

Activate your variant:

Set your project's navigation in the config:

config/navigation.config.ts

typescript

1

Create your navigation component:

Create a new file in components/navigation/ with your project name:

components/navigation/myproject-desktop-navigation.tsx

typescript

2

Register your variant in desktop-navigation.tsx:

components/navigation/desktop-navigation.tsx

typescript

3

Update the type definition:

Add your variant to the type in config/navigation.config.ts:

config/navigation.config.ts

typescript

4

Activate your variant:

Set your project's navigation in the config:

config/navigation.config.ts

typescript

1

Create your navigation component:

Create a new file in components/navigation/ with your project name:

components/navigation/myproject-desktop-navigation.tsx

typescript

2

Register your variant in desktop-navigation.tsx:

components/navigation/desktop-navigation.tsx

typescript

3

Update the type definition:

Add your variant to the type in config/navigation.config.ts:

config/navigation.config.ts

typescript

4

Activate your variant:

Set your project's navigation in the config:

config/navigation.config.ts

typescript