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

PageNavigationItem

PageNavigationItem is a sub-component meant for use inside the PageNavigation molecule.

Basic Usage

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

Full API

NameTypeDefault
isActiveboolean

If true, the item will be marked as active.

false
childrenstring
onClickMouseEventHandler<HTMLButtonElement | HTMLAnchorElement> | undefined

Callback function that is called when the item is clicked.

iconReact.ReactNode

The Coral icon to display in the item. If not provided, no icon will be displayed.

abbreviatedLabelstring

An shorter version of the label given. This is used on the mobile layout.

hrefstring

Supply an href to turn this button into a semantic anchor element, for links and routing.

tostring

The URL to navigate to when the button is clicked, if it is an anchor element, used with React Router.

Last updated on