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

Name	Type	Default
`isActive`	`boolean` If `true`, the item will be marked as active.	`false`
`children`	`string`
`onClick`	`MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement> \| undefined` Callback function that is called when the item is clicked.
`icon`	`React.ReactNode` The Coral icon to display in the item. If not provided, no icon will be displayed.
`abbreviatedLabel`	`string` An shorter version of the label given. This is used on the mobile layout.
`href`	`string` Supply an `href` to turn this button into a semantic anchor element, for links and routing.
`to`	`string` The URL to navigate to when the button is clicked, if it is an anchor element, used with React Router.