7. Layout, Menu and Breadcrumb

In Unit 2.4, we created the CRUD pages automatically with Inferencer and wrapped them with a <Layout> component.

This component is provided when you create a new application using create-refine-app to help you get started quickly by providing simple implementations of Menu and Breadcrumb components using Refine's hooks, useMenu and useBreadcrumb.

Here is the preview for the Layout, Menu and Breadcrumb components:

Layout​

When you create a new application with the Refine, it creates a default layout under the src/components/layout.tsx file and it looks like below:

import { PropsWithChildren } from "react";

import { Menu } from "../menu";
import { Breadcrumb } from "../breadcrumb";

export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
  return (
    <div className="layout">
      <Menu />
      <div className="content">
        <Breadcrumb />
        <div>{children}</div>
      </div>
    </div>
  );
};

It has a Menu and a Breadcrumb component and it renders the children. You can completely customize this component to your needs.

Menu​

The Menu component is located in the src/components/menu.tsx file and it looks like below:

import { useMenu } from "@refinedev/core";
import { NavLink } from "react-router-dom";

export const Menu = () => {
  const { menuItems } = useMenu();

  return (
    <nav className="menu">
      <ul>
        {menuItems.map((item) => (
          <li key={item.key}>
            <NavLink to={item.route ?? "/"}>{item.label}</NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
};

It uses the useMenu hook to get the menu items and renders them as a list. Also, it uses the NavLink component from the react-router-dom package to render the links.

For more information, refer to the useMenu documentation →

Breadcrumb​

The Breadcrumb component is located in the src/components/breadcrumb.tsx file and it looks like below:

import { useBreadcrumb } from "@refinedev/core";
import { Link } from "react-router-dom";

export const Breadcrumb = () => {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <ul className="breadcrumb">
      {breadcrumbs.map((breadcrumb) => (
        <li key={`breadcrumb-${breadcrumb.label}`}>
          {breadcrumb.href ? <Link to={breadcrumb.href}>{breadcrumb.label}</Link> : <span>{breadcrumb.label}</span>}
        </li>
      ))}
    </ul>
  );
};

It uses the useBreadcrumb hook to get the breadcrumb items and renders them as a list. Also, it uses the Link component from the react-router-dom package to render the links.

For more information, refer to the useBreadcrumb documentation →