UI Navigation Extras Catalog

Fifteen cross-cutting app chrome patterns — breadcrumbs, tabs, steppers, pagination, and segmented controls. Compose with shells and dashboards. See CATALOG.md for recipes.

.navx-crumb

Breadcrumb

Trail of links with separators; current page is not a link.

.navx-crumb-collapse

Collapsed Breadcrumb

Deep trails collapse middle segments into an overflow menu.

.navx-tabs

Underline Tabs

Horizontal tabs with underline indicator and panel switching.

Ridge sunrise booking · 18 guests · Sat departure.

.navx-tabs-pill

Pill Tabs

Soft pill selectors for lightweight section switching.

Bookings for the last 7 days.
.navx-tabs-box

Boxed Tabs

Tab strip flush to a card — denser admin settings look.

Name, capacity, and check-in window for Ridge hut.
.navx-tabs-vert

Vertical Tabs

Left rail tabs with content panel — settings-style navigation.

Profile

Display name, avatar, and public guide bio.

.navx-step

Horizontal Stepper

Numbered steps with connectors — done / current / upcoming.

  1. Dates
  2. Guests
  3. Payment
  4. Confirm
.navx-step-progress

Progress Stepper

Compact “Step N of M” with a continuous progress bar.

Step 2 of 4 — Workspace 50%
  1. Account
  2. Workspace
  3. Invite
  4. Done
.navx-step-vert

Vertical Stepper

Timeline-style steps with titles and supporting copy.

  1. Create workspace

    Harbor Studio was created with Pacific timezone.

  2. Invite your crew

    Add guides and front-desk roles before go-live.

  3. Publish availability

    Open the first hut window for guest booking.

.navx-page

Pagination

Prev/next with numbered pages and current indicator.

.navx-page-compact

Compact Pagination

Results meta + page size select + prev/next only.

Showing 1–10 of 128 bookings

.navx-page-ellipsis

Ellipsis Pagination

Many pages with leading/trailing ellipsis gaps.

.navx-seg

Segmented Control

Mutually exclusive view switcher (list / board / calendar).

List view of upcoming trips.

.navx-seg-icons

Icon Segmented Control

Glyph + label segments; labels collapse on narrow viewports.

.navx-chrome

Page Chrome Compose

Breadcrumbs + actions + underline tabs + compact pagination foot.

Summary

Sat sunrise climb · 18 guests confirmed · balance due Friday morning.

Guest 3 of 18