yarn add @twilio-paste/in-page-navigation - or - yarn add @twilio-paste/core
import {InPageNavigation, InPageNavigationItem} from '@twilio-paste/core/in-page-navigation';
const InPageNavigationExample: React.FC = () => {
return (
<InPageNavigation aria-label="my-nav">
<InPageNavigationItem href="#">Home</InPageNavigationItem>
<InPageNavigationItem href="#" currentPage>
About
</InPageNavigationItem>
</InPageNavigation>
);
};
aria-label RequiredRequired
Unique label for the InPageNavigation
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any
- Default
'IN_PAGE_NAVIGATION'
hideBottomBorder
Use sparingly
- Type
boolean
marginBottom
Allows removal of bottom margin by setting space0
- Type
"space0"
orientation
InPageNavigation orientation
- Type
Orientation
variant
InPageNavigation variant
- Type
Variants
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
href RequiredRequired
A URL to route to.
- Type
string
currentPage
Sets the InPageNavigationItem as the current page and adds aria-current="page"
- Type
boolean
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any
- Default
'IN_PAGE_NAVIGATION_ITEM'
title
Accessible title for when the InPageNavigationItem is truncated. Usage is strongly recommended on all InPageNavigationItems, but especially when the text might be truncated (in vertical InPageNavigations or horizontal ones with more than 3 items).
- Type
string
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.