sensitive-blue•6mo ago

How to change title and icon of ThemedLayoutV2

I'm using the <ThemedLayoutV2> component to handle my navigation menu. How do I change the text of the title above the menu that says "Refine Project"?

2 Replies

kapa.ai•6mo ago

Hi @Molag's Meat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the title and icon of the <ThemedLayoutV2> component in your Refine application, you can pass a custom component to the Title prop. This allows you to replace the default title component with your own. Here is an example of how to do this using the <ThemedTitleV2> component:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/antd";  // or "@refinedev/mui", "@refinedev/mantine", "@refinedev/chakra-ui" depending on your UI framework
  
import { MyLargeIcon, MySmallIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
  return (  
    <Refine  
    // ...  
    >  
      <ThemedLayoutV2  
        Title={({ collapsed }) => (  
          <ThemedTitleV2  
            // collapsed is a boolean value that indicates whether the <Sidebar> is collapsed or not  
            collapsed={collapsed}  
            icon={collapsed ? <MySmallIcon /> : <MyLargeIcon />}  
            text="My Project"  
          />  
        )}  
      >  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/antd";  // or "@refinedev/mui", "@refinedev/mantine", "@refinedev/chakra-ui" depending on your UI framework
  
import { MyLargeIcon, MySmallIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
  return (  
    <Refine  
    // ...  
    >  
      <ThemedLayoutV2  
        Title={({ collapsed }) => (  
          <ThemedTitleV2  
            // collapsed is a boolean value that indicates whether the <Sidebar> is collapsed or not  
            collapsed={collapsed}  
            icon={collapsed ? <MySmallIcon /> : <MyLargeIcon />}  
            text="My Project"  
          />  
        )}  
      >  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

In this example: - The Title prop of <ThemedLayoutV2> is used to pass a custom title component. - The custom title component is <ThemedTitleV2>, which accepts collapsed, icon, and text props. - The collapsed prop indicates whether the sidebar is collapsed. - The icon prop is set to display different icons based on the collapsed state. - The text prop is set to "My Project". You can replace MyLargeIcon and MySmallIcon with your own icon components and change the text prop to your desired title. For more details, you can refer to the relevant documentation: - Ant Design ThemedLayoutV2 Title (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout/#title) - Material UI ThemedLayoutV2 Title (https://refine.dev/docs/ui-integrations/material-ui/components/themed-layout/#title) - Mantine ThemedLayoutV2 Title (https://refine.dev/docs/ui-integrations/mantine/components/themed-layout/#title) - Chakra UI ThemedLayoutV2 Title (https://refine.dev/docs/ui-integrations/chakra-ui/components/themed-layout/#title) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@224018850419572736> kapa.ai is still learning and improving, please let us know how it did by reacting below

How to change title and icon of ThemedLayoutV2

Did you find this page helpful?