HeaderNavMenu

Header.NavMenu is a sub-component of the Header organism.

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

Basic Usage


import {
    Header,
    HeaderLogoNavigation,
    HeaderNavMenu,
    HeaderNavMenuItem
} from '@krakentech/coral-organisms';
 
const links = [
    { label: 'Lorem', href: '/', }
    { label: 'Ipsum', href: '/', }
    { label: 'Dolor', href: '/', }
];
 
<Header>
    <HeaderLogoNavigation>
        <HeaderNavMenu>
            {links.map((link, i) => (
                <HeaderNavMenuItem key={i} href={link.href}>
                    {link.label}
                </HeaderNavMenuItem>
            ))}
        </HeaderNavMenu>
    </HeaderLogoNavigation>
</Header>

Sub Nav Links

You can pass subNavLinks prop to HeaderNavMenuItem to create a dropdown menu.


import {
    Header,
    HeaderLogoNavigation,
    HeaderNavMenu,
    HeaderNavMenuItem
} from '@krakentech/coral-organisms';
 
const links = [
    {
        label: 'Lorem',
        subNavLinks: [
            { label: 'Lorem ipsum dolor', href: '/' },
            { label: 'Lorem', href: '/' },
            { label: 'Ipsum dolor', href: '/' },
        ],
    },
    { label: 'Ipsum', href: '/' },
    {
        label: 'Dolor',
        subNavLinks: [
            { label: 'Lorem ipsum', href: '/' },
            { label: 'Lorem', href: '/' },
            { label: 'Lorem ipsum dolor, sit amet', href: '/' },
        ],
    },
];
 
<Header>
    <HeaderLogoNavigation>
        <HeaderNavMenu>
            {links.map((link, i) => (
                <HeaderNavMenuItem key={i} href={link.href} subNavLinks={link.subNavLinks}>
                    {link.label}
                </HeaderNavMenuItem>
            ))}
        </HeaderNavMenu>
    </HeaderLogoNavigation>
</Header>

Home

Support