Loading documentation...
Preparing Ring content
Concepts, value, and typical clone scenarios — less code.
Concepts, value, and typical clone scenarios — less code.
Preparing Ring content
Preparing Ring content
Preparing Ring content
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.
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.
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 configurationImportant: Never import desktop-sidebar.tsx or project-specific navigation directly. Always use DesktopNavigation from desktop-navigation.tsx.
Create or edit config/navigation.config.ts:
For full whitelabel configuration, create whitelabel/instance.config.json:
Create your navigation component:
Create a new file in components/navigation/ with your project name:
Register your variant in desktop-navigation.tsx:
Update the type definition:
Add your variant to the type in config/navigation.config.ts:
Activate your variant:
Set your project's navigation in the config:
All page wrapper components should import DesktopNavigation:
Mobile navigation is handled separately by bottom-navigation.tsx. The same whitelabel pattern can be applied:
The mobile BottomNavigation component includes a fullscreen menu modal with conditional Admin section (visible only for admin/superadmin roles).
@/components/navigation/desktop-navigationconfig/navigation.config.tsdynamic() imports for navigation variants (code splitting)desktop-sidebar.tsx directly in wrappersuseLocale() hookIf your codebase has direct desktop-sidebar imports:
VIKKA (ring-vikka-ua) uses a custom navigation optimized for news portals:
Your navigation system is now whitelabel-ready! Explore more customization options:
Legiox Commander Tip: The whitelabel navigation system was designed to keep the codebase clean and project customizations separate. When in doubt, remember: components import the public API, never the variants directly.
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.
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.
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 configurationImportant: Never import desktop-sidebar.tsx or project-specific navigation directly. Always use DesktopNavigation from desktop-navigation.tsx.
Create or edit config/navigation.config.ts:
For full whitelabel configuration, create whitelabel/instance.config.json:
Create your navigation component:
Create a new file in components/navigation/ with your project name:
Register your variant in desktop-navigation.tsx:
Update the type definition:
Add your variant to the type in config/navigation.config.ts:
Activate your variant:
Set your project's navigation in the config:
All page wrapper components should import DesktopNavigation:
Mobile navigation is handled separately by bottom-navigation.tsx. The same whitelabel pattern can be applied:
The mobile BottomNavigation component includes a fullscreen menu modal with conditional Admin section (visible only for admin/superadmin roles).
@/components/navigation/desktop-navigationconfig/navigation.config.tsdynamic() imports for navigation variants (code splitting)desktop-sidebar.tsx directly in wrappersuseLocale() hookIf your codebase has direct desktop-sidebar imports:
VIKKA (ring-vikka-ua) uses a custom navigation optimized for news portals:
Your navigation system is now whitelabel-ready! Explore more customization options:
Legiox Commander Tip: The whitelabel navigation system was designed to keep the codebase clean and project customizations separate. When in doubt, remember: components import the public API, never the variants directly.
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.
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.
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 configurationImportant: Never import desktop-sidebar.tsx or project-specific navigation directly. Always use DesktopNavigation from desktop-navigation.tsx.
Create or edit config/navigation.config.ts:
For full whitelabel configuration, create whitelabel/instance.config.json:
Create your navigation component:
Create a new file in components/navigation/ with your project name:
Register your variant in desktop-navigation.tsx:
Update the type definition:
Add your variant to the type in config/navigation.config.ts:
Activate your variant:
Set your project's navigation in the config:
All page wrapper components should import DesktopNavigation:
Mobile navigation is handled separately by bottom-navigation.tsx. The same whitelabel pattern can be applied:
The mobile BottomNavigation component includes a fullscreen menu modal with conditional Admin section (visible only for admin/superadmin roles).
@/components/navigation/desktop-navigationconfig/navigation.config.tsdynamic() imports for navigation variants (code splitting)desktop-sidebar.tsx directly in wrappersuseLocale() hookIf your codebase has direct desktop-sidebar imports:
VIKKA (ring-vikka-ua) uses a custom navigation optimized for news portals:
Your navigation system is now whitelabel-ready! Explore more customization options:
Legiox Commander Tip: The whitelabel navigation system was designed to keep the codebase clean and project customizations separate. When in doubt, remember: components import the public API, never the variants directly.