Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationMoleculesPageNavigation

PageNavigation

PageNavigation is a molecule meant for use inside the new dashboard experience. It allows the user to quickly navigate between the key dashboard pages.

Basic Usage

import {
    PageNavigation,
    PageNavigationItem,
} from '@krakentech/coral-molecules';
 
<PageNavigation>
    <PageNavigationItem href="#" icon={<IconHome size={24} />} isActive>
        Home
    </PageNavigationItem>
    <PageNavigationItem href="#" icon={<IconBolt size={24} />}>
        My Energy
    </PageNavigationItem>
    <PageNavigationItem href="#" icon={<IconWallet size={24} />}>
        Payments
    </PageNavigationItem>
</PageNavigation>;

Contained

The PageNavigation can be combined with the Container component to position it as you’d like:

<Container position="sticky" top={20}>
    <PageNavigation>...</PageNavigation>
</Container>

Each item can contain a sub navigation by using a combination of PageNavigationGroup, PageNavigationToggle, PageNavigationSubItems and PageNavigationSubItem.

<Container maxWidth={400}>
    <PageNavigation>
        <PageNavigationItem href="#" icon={<IconHome size={24} />} isActive>
            Home
        </PageNavigationItem>
        <PageNavigationItem href="#" icon={<IconBolt size={24} />}>
            My Energy
        </PageNavigationItem>
        <PageNavigationGroup>
            <PageNavigationToggle icon={<IconWallet size={24} />}>
                Payments
            </PageNavigationToggle>
            <PageNavigationSubItems>
                <PageNavigationSubItem href="#">Overview</PageNavigationSubItem>
                <PageNavigationSubItem href="#" isActive>
                    View bills
                </PageNavigationSubItem>
                <PageNavigationSubItem href="#">
                    Balance history
                </PageNavigationSubItem>
                <PageNavigationSubItem href="#">
                    One-off payment
                </PageNavigationSubItem>
            </PageNavigationSubItems>
        </PageNavigationGroup>
    </PageNavigation>
</Container>

Sticky Final Item

It might be that you want an item that sticks to the bottom of the PageNavigation. Here’s an example of doing so:

<Container height={800} maxWidth={400}>
    <PageNavigation>
        <PageNavigationItem href="#" icon={<IconHome size={24} />} isActive>
            Home
        </PageNavigationItem>
        <PageNavigationItem href="#" icon={<IconBolt size={24} />}>
            My Energy
        </PageNavigationItem>
        <PageNavigationGroup>
            <PageNavigationToggle icon={<IconWallet size={24} />}>
                Payments
            </PageNavigationToggle>
            <PageNavigationSubItems>
                <PageNavigationSubItem href="#">Overview</PageNavigationSubItem>
                <PageNavigationSubItem href="#">
                    View bills
                </PageNavigationSubItem>
                <PageNavigationSubItem href="#">
                    Balance history
                </PageNavigationSubItem>
                <PageNavigationSubItem href="#">
                    One-off payment
                </PageNavigationSubItem>
            </PageNavigationSubItems>
        </PageNavigationGroup>
        <Container marginTop="auto">
            <PageNavigationItem>
                <Stack alignItems="center" fullWidth>
                    <IconSearch size={24} />
                    <Typography textStyle="button">Search</Typography>
                </Stack>
            </PageNavigationItem>
        </Container>
    </PageNavigation>
</Container>

Full API

NameTypeDefault
childrenReactElement<PageNavigationItemProps, string | JSXElementConstructor<any>> | ReactElement<PageNavigationItemProps, string | JSXElementConstructor<...>>[]
Last updated on
GetReferralPageNavigationGroup