Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

In Page Navigation

Version 4.3.1GithubStorybook

In Page Navigation is a set of links that lets users navigate between related pages.

Installation

Installation page anchor
yarn add @twilio-paste/in-page-navigation - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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>
  );
};

Props

Props page anchor

InPageNavigation

InPageNavigation page anchor

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
string
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

InPageNavigationItem

InPageNavigationItem page anchor

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
string
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