#How to Replace the Default AppHeader with a Custom One?

1 messages · Page 1 of 1 (latest)

gloomy skiff
#

Hi, I’m working on customizing the default app header in my project and would appreciate some advice. I’ve successfully replaced the sidebar navigation by updating config.admin.components.Nav with my custom component. However, I’m struggling to do the same for the header.

From what I’ve explored, the config.admin.components.header configuration only seems to accept an array of CustomComponent to render above the existing header, rather than replacing it entirely. Has anyone encountered this scenario or found a way to fully override the default header with a custom implementation?

Any insights, examples, or suggestions would be incredibly helpful! Thank you in advance for your time and expertise.

hollow tangleBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

neon ocean
gloomy skiff
#

Thank you for sharing the example, appreciate it! I just checked it, and it changes the header by using CSS and replacing small parts like the logo or user icon. This is great if I only want to change those small parts. But I want to replace the whole header completely, so I can customize it exactly how I want, without being limited to changing only small parts inside it.

plush oracle
#

If you want to replace the header outright then what I would do is define my own on the header components config and just display: none the actual default header

#

It's doable

gloomy skiff
#

Oh, that makes sense! I'll try that. Thanks @plush oracle @neon ocean

neon ocean
#

surely there's a better way then display:none the original header right

gloomy skiff
#

I tried this approach, and it kinda works! But I noticed the custom component gets added above the existing Payload elements (like the sidebar and main content). What I really want is to replace the default header entirely, so my custom header sits next to the sidebar (just like the original one does). But this approach is okay for now at least.

image.png
gloomy skiff
#

Just tried a new approach, not sure if it's the cleanest way, but it does exactly what I wanted. I'm using createPortal to replace the app-header content, and now it fits my use case perfectly. Adding the code example here, just in case anyone else wanted to do the same.

'use client';

import { useEffect, useState } from 'react';
import { HeaderView } from './Header';
import { createPortal } from 'react-dom';

export const ReplaceAppHeader = () => {
    const [externalElement, setExternalElement] = useState<HTMLElement | null>(null);

    useEffect(() => {
        const element = document.querySelector('.app-header');
        if (element) {
            element.innerHTML = '';
            setExternalElement(element as HTMLElement);
        }
    }, []);

    if (!externalElement) return null;

    return createPortal(<HeaderView />, externalElement);
};
image.png
hollow tangleBOT