Finding the way.

Four ways a person reads where they are in Lumos — crumbs, tabs, pagers, and a top-nav flyout. Accent marks only where you are now; the path you have walked and the path ahead rest in quiet ink.

Breadcrumbhome · items · current

Home Clients Avery Lindqvist Sessions

Slots Link · Page · Separator · Ellipsis. Last crumb is BreadcrumbPage (aria-current="page") in solid ink; links rest in secondary and firm to foreground on hover. Default separator is a chevron.

Tabs · segmentedvariant="segmented"

Overview Notes History

Default variant — a pill cluster on a muted track. The active trigger (data-[state=active]) takes primary ink; sizes via data-size sm/md/lg.

Tabs · pillvariant="pill"

Day Week Month

Standalone pill triggers, no track — for compact toolbars. Active fills primary; the rest tint on hover.

Tabs · underlinevariant="underline"

Details Activity Files

Underline indicator on a bottom border — detail-page chrome. The active tab is the one accent moment, marked in terracotta with a 2px rule.

PaginationisActive · prev/next

Previous 1 2 3 Next

Built on buttonVariants — the active page is outline, all others ghost. Slots Previous · Link · Ellipsis · Next; sizes default/sm/lg/icon.

Navigation Menutrigger · open flyout

Services Pricing About

Hover/focus-revealed flyout for top nav. The open Trigger (h-10, chevron rotates) holds the accent tint; Content renders inside the Viewport. Collapses to a flat block below md.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait