Brand and content

Navbar

Router-independent brand and navigation shell.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Navbar } from "@cofob/design-system-react";

/**
 * Complete Navbar parameter reference.
 * @param brand
 *   type: string | renderable content
 *   default: "cofob"
 *   example: "cofob"
 * @param brandLabel
 *   type: string
 *   default: —
 *   example: "Accessible label"
 * @param homeHref/brandHref
 *   type: string
 *   default: "/"
 *   example: "/guide"
 * @param links
 *   type: readonly LinkItem[]
 *   required
 *   example: {links}
 * @param actions
 *   type: ReactNode | Svelte snippet
 *   default: —
 *   example: <ThemeToggle /> / actions snippet
 * @param menuLabel
 *   type: string
 *   default: "Navigation" / "Main navigation"
 *   example: "Accessible label"
 * @param menuToggleLabel
 *   type: string
 *   default: "Menu"
 *   example: "Accessible label"
 * @param collapseAt
 *   type: "mobile" | "tablet" | "never"
 *   default: "mobile"
 *   example: "tablet"
 * @param menuVariant
 *   type: "floating" | "inline"
 *   default: "floating"
 *   example: "floating"
 * @param surface
 *   type: "solid" | "translucent"
 *   default: "solid"
 *   example: "translucent"
 * @param open/defaultOpen
 *   type: boolean; controlled or initial state
 *   default: false
 *   example: true
 * @param onOpenChange
 *   type: (open: boolean) => void
 *   default: —
 *   example: {handleOpenChange}
 * @param nav attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function NavbarExample() {
  return (
    <Navbar links={links} />
  );
}

Svelte

<script lang="ts">
  import { Navbar } from "@cofob/design-system-svelte";

  // Complete Navbar parameter reference.
  // brand
  //   type: string | renderable content
  //   default: "cofob"
  //   example: "cofob"
  // brandLabel
  //   type: string
  //   default: —
  //   example: "Accessible label"
  // homeHref/brandHref
  //   type: string
  //   default: "/"
  //   example: "/guide"
  // links
  //   type: readonly LinkItem[]
  //   required
  //   example: {links}
  // actions
  //   type: ReactNode | Svelte snippet
  //   default: —
  //   example: <ThemeToggle /> / actions snippet
  // brandContent
  //   type: Svelte snippet
  //   default: —
  //   example: brandContent snippet
  // menuLabel
  //   type: string
  //   default: "Navigation" / "Main navigation"
  //   example: "Accessible label"
  // menuToggleLabel
  //   type: string
  //   default: "Menu"
  //   example: "Accessible label"
  // collapseAt
  //   type: "mobile" | "tablet" | "never"
  //   default: "mobile"
  //   example: "tablet"
  // menuVariant
  //   type: "floating" | "inline"
  //   default: "floating"
  //   example: "floating"
  // surface
  //   type: "solid" | "translucent"
  //   default: "solid"
  //   example: "translucent"
  // open/defaultOpen
  //   type: boolean; controlled or initial state
  //   default: false
  //   example: true
  // onOpenChange
  //   type: (open: boolean) => void
  //   default: —
  //   example: {handleOpenChange}
  // nav attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Navbar links={links} />

HTML

<!--
  Complete Navbar parameter reference.
  brand
    type: string | renderable content
    default: "cofob"
    example: "cofob"
  brandLabel
    type: string
    default: —
    example: "Accessible label"
  homeHref/brandHref
    type: string
    default: "/"
    example: "/guide"
  links
    type: readonly LinkItem[]
    required
    example: {links}
  actions
    type: ReactNode | Svelte snippet
    default: —
    example: <ThemeToggle /> / actions snippet
  menuLabel
    type: string
    default: "Navigation" / "Main navigation"
    example: "Accessible label"
  menuToggleLabel
    type: string
    default: "Menu"
    example: "Accessible label"
  collapseAt
    type: "mobile" | "tablet" | "never"
    default: "mobile"
    example: "tablet"
  menuVariant
    type: "floating" | "inline"
    default: "floating"
    example: "floating"
  surface
    type: "solid" | "translucent"
    default: "solid"
    example: "translucent"
  open/defaultOpen
    type: boolean; controlled or initial state
    default: false
    example: true
  onOpenChange
    type: (open: boolean) => void
    default: —
    example: {handleOpenChange}
  nav attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<nav class="cf-navbar">…</nav>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-navbar`
Adapters	Native · React · Svelte
Primary props	brand · brandLabel · homeHref/brandHref · links · actions · brandContent · menuLabel · menuToggleLabel · collapseAt · menuVariant · surface · open/defaultOpen · onOpenChange · nav attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`brand`	`string \| renderable content`	`"cofob"`	React · Svelte · HTML	`"cofob"`	Brand text or custom brand content.
`brandLabel`	`string`	`—`	React · Svelte · HTML	`"Accessible label"`	Accessible label for a non-text brand.
`homeHref/brandHref`	`string`	`"/"`	React · Svelte · HTML	`"/guide"`	Router-independent home destination.
`links`required	`readonly LinkItem[]`	`required`	React · Svelte · HTML	`{links}`	Portable link records with href, label, external, and current fields.
`actions`	`ReactNode \| Svelte snippet`	`—`	React · Svelte · HTML	`<ThemeToggle /> / actions snippet`	Optional actions at the end of the navigation bar.
`brandContent`	`Svelte snippet`	`—`	Svelte	`brandContent snippet`	Svelte snippet replacing plain brand text.
`menuLabel`	`string`	`"Navigation" / "Main navigation"`	React · Svelte · HTML	`"Accessible label"`	Accessible name for the mobile navigation toggle.
`menuToggleLabel`	`string`	`"Menu"`	React · Svelte · HTML	`"Accessible label"`	Accessible name announced by the disclosure control.
`collapseAt`	`"mobile" \| "tablet" \| "never"`	`"mobile"`	React · Svelte · HTML	`"tablet"`	Breakpoint where navigation moves into its disclosure menu.
`menuVariant`	`"floating" \| "inline"`	`"floating"`	React · Svelte · HTML	`"floating"`	Chooses floating or in-flow disclosure-menu geometry.
`surface`	`"solid" \| "translucent"`	`"solid"`	React · Svelte · HTML	`"translucent"`	Chooses solid or translucent navbar surface tokens.
`open/defaultOpen`	`boolean; controlled or initial state`	`false`	React · Svelte · HTML	`true`	Use open/bind:open for controlled state or defaultOpen for initial state.
`onOpenChange`	`(open: boolean) => void`	`—`	React · Svelte · HTML	`{handleOpenChange}`	Reports every user-driven open state transition.
`nav attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.