Skip to content
Change the site theme
Figma
(information)

In Page Navigation

Peer review pending

An In Page Navigation is a group of styled links that lets users navigate between related pages.


Guidelines

Guidelines page anchor

About In Page Navigation

About In Page Navigation page anchor

The In Page Navigation component allows users to navigate to different pages using a styled group of links. Each In Page Navigation Item is an anchor that links to a related page. Each page within the In Page Navigation should also have an In Page Navigation component so that users can easily navigate back and forth within a set of related pages.

In Page Navigation vs Tabs

In Page Navigation vs Tabs page anchor

Tabs are used to layer related pieces of information together and display one layer at a time on the same URL. Use Tabs to alternate between views within the same context. In Page Navigation is a collection of anchors, rather than buttons. Use In Page Navigation to switch between different, related pages. Tabs replace the entire view based on the selected tab. In Page Navigation links navigate the user to a new page.

  • Each In Page Navigation must have a unique label. To add the label, add the aria-label prop to the <InPageNavigation> tag. Omit the term 'navigation'- it is redundant since the role is already defined as 'navigation'.
  • To interact with In Page Navigation using the keyboard, use the tab key.
  • Each In Page Navigation must have an In Page Navigation Item which is the currently selected page. To specify which page is current, add the currentPage prop to the respective <InPageNavigationItem>. Doing so will set aria-current="page" on that link.

Default In Page Navigation

Default In Page Navigation page anchor

Full width In Page Navigation

Full width In Page Navigation page anchor

Full width In Page Navigation allows the component to expand and fit the width of a containing element.


Installation

Installation page anchor
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>
);
};
PropTypeDescriptionDefault
aria-labelstringUnique label for the InPageNavigationnull
childrenReactNodeInPageNavigationItemnull
variant?fullWidthInPageNavigation variantnull
element?stringOverrides the default element name to apply unique styles with the Customization Provider'IN_PAGE_NAVIGATION'

InPageNavigationItem Props

InPageNavigationItem Props page anchor
PropTypeDescriptionDefault
childrenReactNodeRendered text for the InPageNavigationItemnull
currentPage?booleanSets the InPageNavigationItem as the current page and adds aria-current="page"false
hrefstringA URL to route to. Required.null
rel?anySets the anchor rel attribute.null
element?stringOverrides the default element name to apply unique styles with the Customization Provider'IN_PAGE_NAVIGATION_ITEM'

Black lives matter.