Standard Navigation

SectionSubheaderNav — thin sticky bar that docks directly under a main header: a breadcrumb trail on the left, and either a section's own sub-nav or a single "Back to X" link on the right.

Astro

A persistent app-shell identity menu: avatar trigger, profile header, nav links with aria-current and a pinned sign-out. Reads the current route per render so it never remounts on navigation.

React

In-page section links that highlight themselves as the reader scrolls, so a long docs or landing page always shows where you are without you having to hunt for it. Tracks visibility with IntersectionObserver, never a scroll handler, so it costs nothing on long pages.

React

A 'waffle' product switcher popover for suites that have grown past one nav bar into several standalone apps — a grid of icon tiles for every section, the current one marked, fully arrow-key navigable and closes cleanly on outside click or route change.

React

Header for a drill-down screen: a real back link to the parent (not a history hack), the page title and optional subtitle, and an overflow menu for secondary actions that don't need a permanent button.

React

Wayfinding trail for deep page hierarchies that collapses middle segments behind an ellipsis on narrow screens, keeping the root and current page always visible, with the current page shown as text rather than a dead link.

React

A ⌘K search trigger that opens a fuzzy-filterable command list for jumping anywhere or running any action without leaving the keyboard. Hand-rolled matching, no dependency, with full focus trapping and keyboard selection out of the box.

React

The control bar that sits above any listing: result count, a sort dropdown, a List/Grid view switch, and a filter trigger badged with how many filters are active. This sets the state; pair it with a filter-chip row if you also need to show which filters are applied.

React

A small floating pill for jumping between named sections on long single-page layouts — stays a quiet handle near the top of the page and expands into labelled section dots once the reader scrolls past the hero.

React

An always-docked header search combobox with grouped live suggestions and a persisted recent-query list.

React

The load-more boundary at the end of a list: an invisible IntersectionObserver trigger pages in more results automatically, backed by a real "Load more" button for anyone whose browser blocks it, and a calm end-of-list message once there's nothing left to fetch.

React

A reference panel listing every keyboard shortcut your app supports, grouped by area, opened with a single press of ? like Linear and GitHub — without hijacking the key while someone's typing in a search box or form field.

React

A language-and-region picker for footers and headers that shows the current selection as plain text, never a flag — flags map to countries, not languages, and break down the moment one language spans several regions.

React

Fixed, app-style bottom navigation for 3-5 top-level destinations on phone-width screens. Clear active state, icon + label pairing, and safe-area padding so it never collides with an iOS home indicator or Android gesture bar.

React

A sidebar nav list that surfaces live counts next to each item — unread messages, open tickets, new records — so people know where to look first without opening every section. Counts past 99 collapse to a clean "99+" instead of blowing out the rail, and empty counts hide the badge entirely.

React

A bell trigger with an unread badge opening a New and Earlier notification feed, with mark-all-read and a persisted last-read marker.

React

A browser-style strip of open records for multi-document app shells: each tab closable, order persisted, overflow scrolling with edge fades.

React

A breadcrumb-shaped strip that doubles as a flow tracker for checkout, onboarding or any multi-page sequence — completed steps are real links back, the current step is clearly marked, and steps still ahead are genuinely non-interactive until the user gets there. Compact enough for a header bar, where a full step-circle wizard would be overkill.

React

A small "Recent" trigger that drops a quick-switch list of the records someone just had open — the last deal, ticket or document — so jumping back takes one click instead of a search. Full keyboard support (arrow keys, Enter, Home/End) with no search box at all, which keeps it a fast recall tool rather than a command launcher.

React

StandardRegionFilterToolbar — the control strip above a map/list ops view: search, a date stepper, multi-select region chips, and a map/list/split view switch, in one row that collapses sensibly on a phone.

React

End-of-page block of onward destinations — a heading and a responsive grid of fully-clickable cards, each with a short description and a hover arrow. Static markup, no client JS, built for "related articles" and "keep exploring" footers.

Astro

A horizontally scrollable tab strip for pages with more sections than fit a narrow screen — edge fade masks hint there's more to scroll, the active tab scrolls itself into view on selection, and the overflow stays contained inside the strip instead of widening the page.

React

A compact 2-4 option switch for flipping between view modes — List/Grid, Day/Week/Month — rendered as one track with a sliding selection pill instead of separate buttons. Fully arrow-key operable as a radio group.

React

App sidebar organised into collapsible sections, each holding its own links. Highlights the active route, auto-opens the section a deep link lands in, and keeps every other section's open/closed state exactly as the user left it across route changes.

React

The "skip to content" links keyboard and screen reader users expect as the first stop on a page, styled to match your brand instead of showing as an unstyled browser-default blue link when focused.

Astro

A compact clickable dot/pill position indicator for slide decks, galleries and onboarding screens — the active dot stretches into a pill, every dot is a real button with roving keyboard focus, and position is announced to screen readers rather than shown by colour alone.

React

A horizontal section rail that docks under the header once the page scrolls past it, highlights whichever section is actually in view, and shows how far through the whole page the reader has gotten with a thin fill — built for long docs and product pages where a sidebar doesn't fit.

React

Horizontal tab bar with a sliding underline that glides to the active tab's measured position, full Left/Right/Home/End keyboard navigation, and panels wired with correct ARIA tabs semantics.

React

Hierarchical documentation or file navigation with ARIA tree semantics, branch disclosure, current-page state, and arrow-key focus movement.

React

A narrow left-docked rail of icon-only buttons for app shells — hover or focus reveals a tooltip naming each destination, and a solid active bar shows where you are without spending any horizontal space on labels.

React

Numbered step navigation for checkout, onboarding and signup flows, with clear complete/current/upcoming states and a filling connector line. Collapses to a compact 'Step N of M' progress bar on phone so nothing truncates.

React

An org or workspace switcher combobox with a searchable keyboard-navigable listbox, a pinned create action and the last pick persisted.

React