Navigation

Components that show where you are and move you around the site.

Anchor

An in-page table of contents that tracks the section you are reading

Breadcrumb

Shows where the current page sits in the hierarchy

NavLink

One entry in a navigation list, marking the current page

PrevNext

A pair of links at the foot of a page leading to its neighbours

Scroll inside the panel. The back-to-top button appears after 120px.

Set a clear action hierarchy

A region usually needs one primary action. Keep secondary actions near their content and move less common actions into a menu, keeping the usual path clear.

Provide visible feedback

Saving, uploading, and syncing all need feedback. Keep content visible while waiting and show the result when finished. Preserve input after a failure so users can retry.

Make long content easy to browse

Use headings for structure and spacing to separate paragraphs. Keep long lists at a stable scroll position and offer a way back to the beginning without forcing a scroll when content changes.

Support different input methods

Mouse, touch, and keyboard users should all be able to act. Keep focus visible, name icon buttons, and restore focus to a useful place when an overlay closes.

Reduce unnecessary motion

Motion explains changes in state and position. When reduced motion is enabled, keep the outcome while allowing users to skip scrolling and movement animations.

Check realistic scenarios

Try longer labels, narrow the window, use the keyboard, and check dark mode. A component is ready when these scenarios work as well as the basic example.

Navigation

Overview

Installation

Usage