Skip to contentSkip to navigationSkip to topbar
Figma
Star

In Page Navigation

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

Version 4.3.0
Github
Component preview theme
const BasicInPageNavigation = () => {
return (
<InPageNavigation aria-label="get started">
<InPageNavigationItem href="#" currentPage>
Super SIM
</InPageNavigationItem>
<InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
</InPageNavigation>
);
};
render(
<BasicInPageNavigation />
)

Guidelines

Guidelines page anchor

About In Page Navigation

About In Page Navigation page anchor

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

If you need to switch between multiple views within a single page without taking users to a new URL, use Tabs.

In Page Navigation contains the following elements:

  • InPageNavigationItem: Clickable element that navigates to a new URL
  • InPageNavigation: A collection of InPageNavigationItems

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. Tabs are especially useful when each view presents similar, parallel information, like code in different languages or data visualization in different formats.

In Page Navigation is a collection of anchors, rather than buttons. Use In Page Navigation to switch between different but related pages, especially when there are actions to take on each 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’s redundant since the role is already defined as 'navigation'.
  • Each In Page Navigation must specify the selected page. To specify which page is selected, set the currentPage prop to the respective <InPageNavigationItem>. Doing so will set aria-current="page" on that link.
  • To interact with In Page Navigation using the keyboard, use the tab key to navigate between items and the enter key to select an item.

Horizontal In Page Navigation

Horizontal In Page Navigation page anchor

Use Horizontal In Page Navigation in most cases.

Component preview theme
const BasicInPageNavigation = () => {
return (
<InPageNavigation aria-label="get started">
<InPageNavigationItem href="#" currentPage>
Super SIM
</InPageNavigationItem>
<InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
</InPageNavigation>
);
};
render(
<BasicInPageNavigation />
)

Full width In Page Navigation

Full width In Page Navigation page anchor

Use full-width In Page Navigation to fit the width of a containing element. Each item will expand equally to the same width. The full-width variant is recommended for compact spaces.

Component preview theme
const FullWidthInPageNavigation = () => {
return (
<InPageNavigation aria-label="privacy" variant="fullWidth">
<InPageNavigationItem href="#" currentPage>
Home
</InPageNavigationItem>
<InPageNavigationItem href="#">Detection</InPageNavigationItem>
<InPageNavigationItem href="#">Settings</InPageNavigationItem>
</InPageNavigation>
);
};
render(
<FullWidthInPageNavigation />
)

Vertical In Page Navigation

Vertical In Page Navigation page anchor

Use Vertical In Page Navigation when creating a second layer of hierarchy underneath a horizontal or full-width In Page Navigation.

Place this vertical In Page Navigation on the left side of the page, and wrap it in a Box with a right margin of space-110.

Component preview theme
const VerticalInPageNavigation = () => {
return (
<Box marginRight="space110">
<InPageNavigation aria-label="privacy" orientation="vertical">
<InPageNavigationItem href="#" currentPage>
Space name
</InPageNavigationItem>
<InPageNavigationItem href="#">Connection policy</InPageNavigationItem>
<InPageNavigationItem href="#">Labels</InPageNavigationItem>
</InPageNavigation>
</Box>
);
};
render(
<VerticalInPageNavigation />
)

Don't add interactive elements to an In Page Navigation item since it makes it difficult for users of assistive technologies to focus or click on an item.

In Page Navigation labels should be short to improve readability. Users should be able to easily scan the items and know what type of content to expect. Try to keep labels to 1-2 words each.

Labels should be parallel parts of speech. For example, all nouns (Documents, Images, Downloads).

Do

Use In Page Navigation for navigating users to different but related pages, such as different pages of settings.

Don't

Don’t use In Page Navigation when swapping between views on the same page. Use Tabs instead.

Do

Keep In Page Navigation labels concise.

Don't

Don’t use more than 2 words in an In Page Navigation label, unless absolutely necessary.