Metronic React
Getting Started

Layouts

Learn about the layout system in Metronic React and how to use different layouts for various page types.

Metronic React comes with several pre-built layouts to handle different page scenarios:

  1. Dashboard Layouts (Demo1, Demo2, Demo3): For authenticated dashboard pages
  2. Authentication Layouts (Auth, Auth-Branded): For login, registration, and other auth pages
  3. Error Layout: For error pages like 404, 500, etc.

These layouts are located in the src/layouts directory and can be used in your routing configuration.

Dashboard Layouts

Demo1 Layout

The Demo1 layout is a classic dashboard layout with a fixed sidebar and header.

// Using Demo1 Layout in your routes
import { Demo1Layout } from '@/layouts/demo1/layout';
 
<Route element={<Demo1Layout />}>
  <Route path="/" element={<YourPage />} />
  <Route path="/dashboard" element={<DashboardPage />} />
</Route>

Structure:

  • Fixed sidebar on the left
  • Header at the top
  • Main content area
  • Footer at the bottom

Features:

  • Collapsible sidebar
  • Responsive design (sidebar converts to mobile menu on small screens)
  • Dynamic page title based on current route
  • Body class modifications for styling

Demo2 Layout

The Demo2 layout offers a different dashboard experience with a horizontal menu.

// Using Demo2 Layout in your routes
import { Demo2Layout } from '@/layouts/demo2/layout';
 
<Route element={<Demo2Layout />}>
  <Route path="/alternative" element={<AlternativePage />} />
</Route>

Structure:

  • Horizontal navigation menu at the top
  • Header with user profile and notifications
  • Main content area
  • Footer at the bottom

Demo3 Layout

The Demo3 layout is the default dashboard layout used in the application.

// Using Demo3 Layout in your routes
import { Demo3Layout } from '@/layouts/demo3/layout';
 
<Route element={<Demo3Layout />}>
  <Route path="/" element={<DefaultPage />} />
</Route>

Structure:

  • Sidebar on the left side
  • Header at the top
  • Main content area
  • Footer at the bottom

Implementation:

// src/layouts/demo1/layout.tsx
import { Helmet } from "react-helmet-async";
import { useMenu } from '@/hooks/use-menu';
import { MENU_SIDEBAR } from '@/config/menu.config';
import { Outlet } from 'react-router-dom';
import { Sidebar } from "./components/sidebar";
import { Footer } from "./components/footer";
import { Header } from "./components/header";
import { useIsMobile } from "@/hooks/use-mobile";
import { useSettings } from "@/providers/settings-provider";
import { useEffect } from "react";
 
export function Demo1Layout() {
  const isMobile = useIsMobile();
  const { getCurrentItem } = useMenu();
  const item = getCurrentItem(MENU_SIDEBAR);
  const { settings, setOption } = useSettings();
 
  useEffect(() => {
    // Set current layout
    setOption('layout', 'demo1');
  }, [setOption]);
 
  // CSS classes and side effects...
 
  return (
    <>
      <Helmet>
        <title>{item?.title}</title>
      </Helmet>
 
      {!isMobile && <Sidebar />}
 
      <div className="wrapper flex grow flex-col">
        <Header />
 
        <main className="grow pt-5" role="content">
          <Outlet />
        </main>
 
        <Footer />
      </div>
    </>
  );
};

Authentication Layouts

Auth Layout

The Auth layout is designed for authentication pages like login and registration.

// Using Auth Layout in your routes
import { AuthLayout } from '@/layouts/auth/layout';
 
<Route element={<AuthLayout />}>
  <Route path="/auth/login" element={<LoginPage />} />
  <Route path="/auth/register" element={<RegisterPage />} />
</Route>

Structure:

  • Centered content area
  • Clean, minimal design
  • Background image

Implementation:

// src/layouts/auth/layout.tsx
import { Outlet } from 'react-router-dom';
import { toAbsoluteUrl } from '@/lib/helpers';
import { useSettings } from '@/providers/settings-provider';
import { useEffect } from 'react';
 
export function AuthLayout() {
  const { setOption } = useSettings();
 
  // Set current layout
  useEffect(() => {
    setOption('layout', 'demo1');
  }, [setOption]);
 
  return (
    <>
      <style>
        {`
          .page-bg {
            background-image: url('${toAbsoluteUrl('/media/images/2600x1200/bg-10.png')}');
          }
          .dark .page-bg {
            background-image: url('${toAbsoluteUrl('/media/images/2600x1200/bg-10-dark.png')}');
          }
        `}
      </style>
      <div className="flex items-center justify-center grow bg-center bg-no-repeat page-bg">
        <Outlet />
      </div>
    </>
  );
};

Auth-Branded Layout

The Auth-Branded layout provides an authentication experience with branding elements.

// Using Auth-Branded Layout in your routes
import { AuthBrandedLayout } from '@/layouts/auth-branded/layout';
 
<Route element={<AuthBrandedLayout />}>
  <Route path="/auth/branded-login" element={<BrandedLoginPage />} />
</Route>

Structure:

  • Brand logo and messaging
  • Authentication forms
  • Background with brand colors or images

Error Layout

The Error layout is designed for displaying error pages.

// Using Error Layout in your routes
import { ErrorLayout } from '@/layouts/error/layout';
 
<Route element={<ErrorLayout />}>
  <Route path="/error/404" element={<NotFoundPage />} />
  <Route path="/error/500" element={<ServerErrorPage />} />
</Route>

Structure:

  • Centered content
  • Minimal design focusing on error information

Implementation:

// src/layouts/error/layout.tsx
import { Outlet } from 'react-router-dom';
 
export function ErrorLayout() {
  return (
    <div className="flex flex-col items-center justify-center grow h-[95%]" >
      <Outlet />
    </div >
  )
};

Using Layouts in Routing

Layouts are applied in the routing configuration using nested routes with the React Router's Outlet component.

Here's how layouts are used in the main routing setup:

// src/routing/app-routing-setup.tsx
import { ReactElement } from 'react';
import { Navigate, Route, Routes } from 'react-router';
import { DefaultPage } from '@/pages/dashboards';
import { RequireAuth } from '@/auth/require-auth';
import { Demo3Layout } from '@/layouts/demo3/layout';
import { ErrorRouting } from '@/errors/error-routing';
import { AuthRouting } from '@/auth/auth-routing';
 
const AppRoutingSetup = (): ReactElement => {
  return (
    <Routes>
      <Route element={<RequireAuth />}>
        <Route element={<Demo3Layout />}>
          <Route path="/" element={<DefaultPage />} />
          {/* Other protected routes... */}
        </Route>
      </Route>
      <Route path="error/*" element={<ErrorRouting />} />
      <Route path="auth/*" element={<AuthRouting />} />
      <Route path="*" element={<Navigate to="/error/404" />} />
    </Routes>
  );
};

Layout Components

Each layout consists of various components:

Header Component

The header component typically includes:

  • Logo/brand
  • Navigation
  • User profile dropdown
  • Notifications
  • Search

Sidebar Component

The sidebar component typically includes:

  • Navigation menu
  • Collapsible sections
  • Quick links

Footer Component

The footer component typically includes:

  • Copyright information
  • Links to documentation/help
  • Version information

Customizing Layouts

Modifying Existing Layouts

To modify an existing layout:

  1. Copy the layout file from src/layouts/[layout-name]/layout.tsx to your project
  2. Make your changes to the layout structure or styling
  3. Update your routing to use your modified layout

Creating a New Layout

To create a new layout:

  1. Create a new directory in src/layouts/your-layout-name/
  2. Create a layout.tsx file with your layout implementation
  3. Create any necessary components in src/layouts/your-layout-name/components/
  4. Use the new layout in your routing configuration
// src/layouts/custom-layout/layout.tsx
import { Outlet } from 'react-router-dom';
import { Header } from './components/header';
import { Sidebar } from './components/sidebar';
import { Footer } from './components/footer';
 
export function CustomLayout() {
  return (
    <div className="custom-layout">
      <Header />
      <div className="content-wrapper">
        <Sidebar />
        <main className="main-content">
          <Outlet />
        </main>
      </div>
      <Footer />
    </div>
  );
}

Layout Settings

Layouts can be dynamically configured using the Settings provider:

import { useSettings } from '@/providers/settings-provider';
 
function YourComponent() {
  const { settings, setOption } = useSettings();
 
  // Toggle sidebar collapse
  const toggleSidebar = () => {
    setOption('layouts.demo1.sidebarCollapse', !settings.layouts.demo1.sidebarCollapse);
  };
 
  return (
    <button onClick={toggleSidebar}>
      Toggle Sidebar
    </button>
  );
}

Managing Body Classes

Layouts often need to add or remove classes on the document body. This is handled using the useEffect hook:

useEffect(() => {
  const bodyClass = document.body.classList;
 
  // Add layout-specific classes
  bodyClass.add('layout-name');
  bodyClass.add('header-fixed');
 
  // Remove classes on component unmount
  return () => {
    bodyClass.remove('layout-name');
    bodyClass.remove('header-fixed');
  };
}, []);

For more advanced customizations, refer to the layout files in the src/layouts directory and the styling utilities in src/css.

PreviousAdding New PageNextRouting