HeaderLogoNavigation

HeaderLogoNavigation is a sub-component of the Header organism.

It is used as a containing element for the logo and navigation in the Header.

Basic Usage


import { Header, HeaderLogoNavigation } from '@krakentech/coral-organisms';
 
<Header>
    <HeaderLogoNavigation>
        <Logo link="#!" 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>
</Header>