Header

A website Header that provides navigation and account actions for a user.

Basic Usage


import {
    Header,
    HeaderActions,
    HeaderLanguageSwitcher,
    HeaderLogoNavigation,
    HeaderMenuToggleButton,
    HeaderNavMenu,
    HeaderNavMenuItem,
} from '@krakentech/coral-organisms';
import { Logo } from '@krakentech/coral';
 
const links = [
    { label: 'Energy', href: '/energy' },
];
 
const locales = { en: 'English', es: 'Español' };
 
const user = {
    href: '#!',
    preferredName: 'Peter Miller',
    preferredNameFallback: 'Account',
    isAuthenticated: false,
    login: {
        href: '#!',
        label: 'Log in',
    },
};
 
const supportLink = {
    href: '#!',
    label: 'Support',
};
 
<Header
    currentLocale="en"
    locales={locales}
    user={user}
    supportLink={supportLink}
>
    <HeaderLogoNavigation>
        <Logo
            href="#!"
            hrefSrLabel="Home"
            variant="logomark"
            width={24}
        />
        <HeaderMenuToggleButton closedText="Menu" openText="Back" />
        <HeaderNavMenu>
            {links.map((link, i) => (
                <HeaderNavMenuItem key={i} href={link.href}>
                    {link.label}
                </HeaderNavMenuItem>
            ))}
        </HeaderNavMenu>
    </HeaderLogoNavigation>
 
    <HeaderActions>
        <HeaderLanguageSwitcher
            onLanguageSelect={(e) => {
                console.log('onLanguageSelect: ', e);
            }}
        />
    </HeaderActions>
</Header>

Home

Support

properties

user

The Header component comes with an optional user prop that allows you to pass in user information. This is done using a prop because this information appears in different places depending on the screen width (as opposed to using a compound component to render this).

supportLink

The Header component comes with an optional supportLink prop that allows you to pass in the href and label to render a link to the Support page on your site. This is done using a prop because this information appears in different places depending on the screen width (as opposed to using a compound component to render this).

useCoralHeader()

The header has it’s own context made available to the consumer via the useCoralHeader hook. This hook provides the following properties:

isMenuOpen - A boolean value indicating whether the menu is open or not
setIsMenuOpen - A function to set the menu open state
isLanguageDropdownOpen - A boolean value indicating whether the language switcher is open or not
setIsLanguageDropdownOpen - A function to set the language switcher open state
locales - An object containing the available locales
currentLocale - A string value indicating the current locale


const {
    isMenuOpen,
    setIsMenuOpen,
    isLanguageDropdownOpen,
    setIsLanguageDropdownOpen,
    locales,
    currentLocale,
} = useCoralHeader();

Theming the Header?

The Coral Header does not make use of the internal token system. This means if you’d like to theme the Header, you’ll need to edit the recipe directly. An example of how to do this:


import { defineConfig } from '@pandacss/dev';
import { createCoralPreset, partsList } from '@krakentech/coral-design';
 
export default defineConfig({
    presets: [
        createCoralPreset({}),
    ],
    theme: {
        extend: {
            recipes: {
                StyledHeader: {
                    base: partsList.headerParts({
                        root: {
                            backgroundColor: 'pink',
                            
                            '& [data-part="button-root"]': {
                                color: 'black',
                            }
                        },
                        navMenuBackground: {
                            backgroundColor: 'pink',
                        },
                        navMenuAccount: {
                            backgroundColor: 'pink'
                        }
                    }),
                },
            },
        },
    },
});