LogoBoring Template

Navigation System

Type-safe routing configuration, providing a flexible and maintainable way to handle navigation in your application.

The Boring Template implements a type-safe routing system that ensures consistency and maintainability throughout your application.

Key Features

Type-Safe Routes

🔒 Fully typed route definitions and parameters

Active State

🎯 Intelligent active route detection

Dynamic Paths

🔄 Support for dynamic route parameters

Responsive

📱 Adaptive navigation components

Route Configuration

Routes are defined in a type-safe configuration object that includes metadata, paths, and additional information for each route.

types.ts
type RouteConfigType = {
  path: string;
  disabled?: boolean;
  name: RouteName;
  metadata: Metadata;
  metadataExtra: {
    image?: string;
    icon?: keyof typeof Icons;
    name: string;
  };
};

Using typed route configurations ensures that navigation links are consistent and helps prevent broken links.

AppSidebar

The AppSidebar component provides a hierarchical navigation structure with categories and items.

app-sidebar.tsx
import { ROUTES } from "@/lib/routes";
 
const dashboardRoutes: RouteConfigType[] = [
  ROUTES.dashboard,
  ROUTES.analytics,
  ROUTES.items,
];
 
const miscRoutes: RouteConfigType[] = [
  {
    name: "settings-workspace",
    path: "/settings",
    metadata: {
      title: "Settings",
    },
    metadataExtra: {
      name: "Settings",
      icon: "settings",
    },
  },
];

The NavMain component renders navigation items with icons and active states.

components/global/nav-main
// Main routes
<NavMain
  routes={dashboardRoutes}
  slug={slug}
  label="Main routes"
/>
 
// Misc routes
<NavMain
  routes={miscRoutes}
  slug={slug}
  className="mt-auto"
  label="Misc routes"
/>

Responsive Navigation

All navigation components are designed to be responsive, adapting to different screen sizes and device types.

Route Helpers

createRoute

Creates a route with type-safe parameters

redirectToRoute

Redirects to a route with proper typing

isRouteActive

Determines if a route is currently active

createRoute

Creates a type-safe route with parameters:

lib/utils.ts
createRoute("dashboard", { slug: "workspace-1" });

redirectToRoute

Redirects to a route with proper typing:

lib/utils.ts
redirectToRoute("settings", { slug: "workspace-1" });

isRouteActive

Determines if a route is currently active:

lib/utils.ts
isRouteActive(routeHref, pathname, 1);

Best Practices

Route Definition

  • Use type-safe route names
  • Include proper metadata
  • Define clear path patterns
  • Document route parameters

Navigation Usage

  • Leverage type checking
  • Use helper functions
  • Handle loading states
  • Implement proper active states

Usage Example

Here's a complete example of implementing navigation in a dashboard layout:

app/(web)/(dashboard)/[slug]/layout.tsx
import { AppSidebar } from "@/components/sidebar/app-sidebar";
import { WorkspaceSwitcher } from "@/components/workspace/workspace-switcher";
import { ROUTES } from "@/lib/routes";
 
export default function DashboardLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { slug: string };
}) {
  return (
    <div className="grid h-screen grid-cols-[240px_1fr]">
      <AppSidebar slug={params.slug} />
      <main className="overflow-auto">
        <WorkspaceSwitcher currentSlug={params.slug} />
        {children}
      </main>
    </div>
  );
}

Always use the provided route helper functions instead of hardcoding URLs to ensure type safety and maintainability.

Authentication

Learn how to implement and configure authentication using Better-auth in your application.

Onboarding Flow

Guide users through setting up their account in a structured, step-by-step process.

On this page