signature primitive

StickerNavbar

Frame a site with accessible ribbon or collage navigation.

alpha@scout-ui/react

Install Source ↗Report issue ↗

Live · bounded

StickerNavbar preview

Code

Deterministic React output

Generated code

Plain TSX ready

import { StickerNavbar } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

const items = [
  { id: "components", label: "Components", href: "/components" },
  { id: "guides", label: "Guides", href: "/guides" },
  { id: "examples", label: "Examples", href: "/examples" },
] as const;

export default function StickerNavbarExample() {
  return (
    <StickerNavbar
      brand={<a href="/">STICK/WORK</a>}
      items={items}
      activeId="components"
    />
  );
}

Open full playground →

Install

Scout UI is in alpha preflight and is not represented here as a public npm release. Inside the workspace, consume the frozen package contract by name.

tsx

import { StickerNavbar } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

Usage

Use ribbon or collage around a short semantic navigation set; links remain anchors and custom renderers must preserve the supplied contract.

tsx

import { StickerNavbar } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

const items = [
  { id: "components", label: "Components", href: "/components" },
  { id: "guides", label: "Guides", href: "/guides" },
  { id: "examples", label: "Examples", href: "/examples" },
] as const;

export default function StickerNavbarExample() {
  return (
    <StickerNavbar
      brand={<a href="/">STICK/WORK</a>}
      items={items}
      activeId="components"
    />
  );
}

Examples

Inspect a complete authored setting, then adapt it without copying private implementation details.

Open the related recipe →

API

StickerNavbarProps / StickerNavItem is part of the frozen alpha surface. The table below is generated from the same typed schema that powers presets, preview, Copy Code, share URLs, and Copy AI Prompt.

Prop	Control	Default	Contract
`variant`	segmented	`"ribbon"`	Choose ribbon or collage structure.
`activeId`	select	`"components"`	Expose one current navigation destination.
`sticky`	boolean	`false`	Exercise the documented sticky contract inside the bounded model.
`showScrollProgress`	boolean	`false`	Show compositor-friendly decorative progress.
`collage`	sticker	`"wonky-star"`	Choose the leading approved collage asset.
`reducedMotion`	select	`"system"`	Show ribbon and collage in their composed resting state.

Presets

RibbonCalm ribbon navigation.
CollageArt-directed sticker collage.
ProgressRibbon with sticky and scroll-progress contracts.

Accessibility

Desktop links are native anchors. The responsive menu uses Radix Dialog for focus containment, Escape, and return focus.

Motion and reduced motion

Ribbon and collage render in their composed resting state while active/current markers remain explicit.

Touch and small screens

Below the menu breakpoint the complete enabled link group moves into one readable paper sheet; decoration crops instead of shrinking labels.

SSR and React Server Components

Semantic header, navigation, links, and decorative poster render on the server; the leaf owns a narrow client boundary for menu and scroll behavior.

Performance

Scroll progress is optional and compositor-friendly. Decorative assets are bounded and isolated from the functional layer.

Constraints

Do not collide ribbon paths with controls, obscure labels with collage art, or preserve desktop density at mobile widths.

Source

Inspect the implementation and tests in the public Scout UI repository. Code uses MIT licensing; official artwork uses its separately documented asset license.

Open the public source file ↗