TopNav

Compact horizontal native navigation with active-route matching and roving keyboard focus.@gemologic/sheen-patterns · application

Playground

This example has no scalar controls. Its validated source remains interactive below.

<TopNav pathname="/orders" navigation={{ id: "primary", label: "Primary", items: [{ kind: "link", id: "orders", label: "Orders", href: "/orders" }] }} />

Variant matrix

Primary top navigation

Anatomy

Package

@gemologic/sheen-patterns

Source

packages/patterns/src/TopNav.tsx

Tokens

--sheen-color-bg-hover
--sheen-color-bg-selected
--sheen-color-focus-ring

Accessibility

Role: navigation, linkKeyboard: Tab, Shift+Tab, ArrowLeft, ArrowRight, Home, End, Enter

Do

Supply the accepted router pathname and stable item IDs.

Do not

Do not use action callbacks for destinations.

Generated props

Name	Type	Default	Description
`navigation` *	`AdminNavigationModel`	—	App-owned navigation tree. Nested links flatten in declaration order for the horizontal presentation.
`pathname` *	`string`	—	Accepted local pathname used for most-specific exact or segment-prefix matching.
`compact`	`boolean`	`true`	Compact visual-density marker; behavior and landmark naming do not change.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.