Navigation

A flexible navigation component for creating horizontal or vertical navigation menus. Supports active states, disabled items, and leading/trailing slots where you can place any element — icons, badges, stamps, etc. Badges placed in trailing automatically scale with the navigation size.

Each item is a Panel, and so is the <nav> itself — the surface, hover and press ramps, the reserved 1px border and the current-item state all come from there. Anything Panel can do to a surface, a navigation item can do too; see Inheriting from Panel.

Emphasis

emphasis is Panel’s, and describes the resting rows. tertiary (the default) keeps them colorless, secondary tints them on the feedback ramp, and primary fills every row with the accent surface.

feedback stays neutral by default so labels read as text rather than as links. The demo below sets feedback="primary" only to make the three levels tellable apart — on the neutral palette secondary and tertiary resolve to the same ramp.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { NavigationBaseProps } from "@pindoba/core-navigation";

// Every item is a Panel, so `emphasis` is Panel's: how the RESTING rows look.
// `tertiary` (the default) is colorless, `secondary` tints on the feedback
// ramp, `primary` fills every row with the accent surface. In the composed
// Astro form each `<NavigationItem>` takes its own style props (there's no
// context cascade).
// `feedback="primary"` is set here only so the levels are TELLABLE APART: on
// the default neutral palette `secondary` and `tertiary` resolve to the same
// ramp. It also tints the resting labels, which is why it isn't the default.
const levels: NonNullable<NavigationBaseProps["emphasis"]>[] = [
  "tertiary",
  "secondary",
  "primary",
];
const labels = ["Overview", "Reports", "Settings"];
---

<div class={stack({ gap: "lg" })}>
  {
    levels.map((emphasis) => (
      <Navigation feedback="primary" emphasis={emphasis}>
        {labels.map((label) => (
          <NavigationItem
            label={label}
            href="#"
            feedback="primary"
            emphasis={emphasis}
            isActive={label === "Overview"}
          />
        ))}
      </Navigation>
    ))
  }
</div>

import { Navigation } from "../Navigation";
import { stack } from "@pindoba/styled-system/patterns";
import type { NavigationBaseProps } from "@pindoba/core-navigation";

// Every item is a Panel, so `emphasis` is Panel's: how the RESTING rows look.
// `tertiary` (the default) is colorless, `secondary` tints on the feedback
// ramp, `primary` fills every row with the accent surface.
// `feedback="primary"` is set here only so the levels are TELLABLE APART: on
// the default neutral palette `secondary` and `tertiary` resolve to the same
// ramp. It also tints the resting labels, which is why it isn't the default.
const levels: NonNullable<NavigationBaseProps["emphasis"]>[] = [
  "tertiary",
  "secondary",
  "primary",
];

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];

export default function EmphasisDemo() {
  return (
    <div className={stack({ gap: "lg" })}>
      {levels.map((emphasis) => (
        <Navigation
          key={emphasis}
          items={items}
          feedback="primary"
          emphasis={emphasis}
          activeItem="Overview"
        />
      ))}
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { NavigationBaseProps } from "@pindoba/core-navigation";

  // Every item is a Panel, so `emphasis` is Panel's: how the RESTING rows look.
  // `tertiary` (the default) is colorless, `secondary` tints on the feedback
  // ramp, `primary` fills every row with the accent surface.
  // `feedback="primary"` is set here only so the levels are TELLABLE APART: on
  // the default neutral palette `secondary` and `tertiary` resolve to the same
  // ramp. It also tints the resting labels, which is why it isn't the default.
  const levels: NonNullable<NavigationBaseProps["emphasis"]>[] = [
    "tertiary",
    "secondary",
    "primary",
  ];

  const items = [
    { label: "Overview", href: "#" },
    { label: "Reports", href: "#" },
    { label: "Settings", href: "#" },
  ];
</script>

<div class={stack({ gap: "lg" })}>
  {#each levels as emphasis (emphasis)}
    <Navigation {items} feedback="primary" {emphasis} activeItem="Overview" />
  {/each}
</div>

<script setup lang="ts">
import { Navigation } from "@pindoba/vue-navigation";
import { stack } from "@pindoba/styled-system/patterns";
import type { NavigationBaseProps } from "@pindoba/core-navigation";

// Every item is a Panel, so `emphasis` is Panel's: how the RESTING rows look.
// `tertiary` (the default) is colorless, `secondary` tints on the feedback
// ramp, `primary` fills every row with the accent surface.
// `feedback="primary"` is set here only so the levels are TELLABLE APART: on
// the default neutral palette `secondary` and `tertiary` resolve to the same
// ramp. It also tints the resting labels, which is why it isn't the default.
const levels: NonNullable<NavigationBaseProps["emphasis"]>[] = [
  "tertiary",
  "secondary",
  "primary",
];

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];
</script>

<template>
  <div :class="stack({ gap: 'lg' })">
    <Navigation
      v-for="emphasis in levels"
      :key="emphasis"
      :items="items"
      feedback="primary"
      :emphasis="emphasis"
      activeItem="Overview"
    />
  </div>
</template>

Active Emphasis

activeEmphasis controls how loud the current item is, independent of the resting rows. It defaults to secondary — a tint on the feedback ramp with promoted text and a lifted border, which marks the row without shouting. Raise it to primary for a filled brand row when the navigation has to read at a glance, or drop to tertiary for a colorless tint.

Pair it with feedback="primary" (as the demo does) for a brand-colored current item; on the default neutral palette every level paints on the neutral ramp.

The current item is matched from activeItem and marked with aria-current="page". A parent whose submenu is closed (a flyout or a compact rail) takes the active look too, so the current section stays visible when the matching child isn’t.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { NavigationBaseProps } from "@pindoba/core-navigation";

// How loud the CURRENT item is, independent of the resting rows. `secondary`
// (the default) tints on the feedback ramp and promotes the text — enough to
// mark the row without shouting; `primary` fills it with the brand surface
// for a nav that has to read at a glance, `tertiary` stays colorless. In the
// composed Astro form each `<NavigationItem>` takes its own style props
// (there's no context cascade).
// `feedback="primary"` is set here only so the levels are TELLABLE APART: on
// the default neutral palette `secondary` and `tertiary` resolve to the same
// ramp. It also tints the resting labels, which is why it isn't the default.
const levels: NonNullable<NavigationBaseProps["activeEmphasis"]>[] = [
  "secondary",
  "primary",
  "tertiary",
];
const labels = ["Overview", "Reports", "Settings"];
---

<div class={stack({ gap: "lg" })}>
  {
    levels.map((activeEmphasis) => (
      <Navigation feedback="primary" activeEmphasis={activeEmphasis}>
        {labels.map((label) => (
          <NavigationItem
            label={label}
            href="#"
            feedback="primary"
            activeEmphasis={activeEmphasis}
            isActive={label === "Reports"}
          />
        ))}
      </Navigation>
    ))
  }
</div>

import { Navigation } from "../Navigation";
import { stack } from "@pindoba/styled-system/patterns";
import type { NavigationBaseProps } from "@pindoba/core-navigation";

// How loud the CURRENT item is, independent of the resting rows. `secondary`
// (the default) tints on the feedback ramp and promotes the text — enough to
// mark the row without shouting; `primary` fills it with the brand surface
// for a nav that has to read at a glance, `tertiary` stays colorless.
// `feedback="primary"` is set here only so the levels are TELLABLE APART: on
// the default neutral palette `secondary` and `tertiary` resolve to the same
// ramp. It also tints the resting labels, which is why it isn't the default.
const levels: NonNullable<NavigationBaseProps["activeEmphasis"]>[] = [
  "secondary",
  "primary",
  "tertiary",
];

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];

export default function ActiveEmphasisDemo() {
  return (
    <div className={stack({ gap: "lg" })}>
      {levels.map((activeEmphasis) => (
        <Navigation
          key={activeEmphasis}
          items={items}
          feedback="primary"
          activeEmphasis={activeEmphasis}
          activeItem="Reports"
        />
      ))}
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { NavigationBaseProps } from "@pindoba/core-navigation";

  // How loud the CURRENT item is, independent of the resting rows. `secondary`
  // (the default) tints on the feedback ramp and promotes the text — enough to
  // mark the row without shouting; `primary` fills it with the brand surface
  // for a nav that has to read at a glance, `tertiary` stays colorless.
  // `feedback="primary"` is set here only so the levels are TELLABLE APART: on
  // the default neutral palette `secondary` and `tertiary` resolve to the same
  // ramp. It also tints the resting labels, which is why it isn't the default.
  const levels: NonNullable<NavigationBaseProps["activeEmphasis"]>[] = [
    "secondary",
    "primary",
    "tertiary",
  ];

  const items = [
    { label: "Overview", href: "#" },
    { label: "Reports", href: "#" },
    { label: "Settings", href: "#" },
  ];
</script>

<div class={stack({ gap: "lg" })}>
  {#each levels as activeEmphasis (activeEmphasis)}
    <Navigation
      {items}
      feedback="primary"
      {activeEmphasis}
      activeItem="Reports"
    />
  {/each}
</div>

<script setup lang="ts">
import { Navigation } from "@pindoba/vue-navigation";
import { stack } from "@pindoba/styled-system/patterns";
import type { NavigationBaseProps } from "@pindoba/core-navigation";

// How loud the CURRENT item is, independent of the resting rows. `secondary`
// (the default) tints on the feedback ramp and promotes the text — enough to
// mark the row without shouting; `primary` fills it with the brand surface
// for a nav that has to read at a glance, `tertiary` stays colorless.
// `feedback="primary"` is set here only so the levels are TELLABLE APART: on
// the default neutral palette `secondary` and `tertiary` resolve to the same
// ramp. It also tints the resting labels, which is why it isn't the default.
const levels: NonNullable<NavigationBaseProps["activeEmphasis"]>[] = [
  "secondary",
  "primary",
  "tertiary",
];

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];
</script>

<template>
  <div :class="stack({ gap: 'lg' })">
    <Navigation
      v-for="activeEmphasis in levels"
      :key="activeEmphasis"
      :items="items"
      feedback="primary"
      :activeEmphasis="activeEmphasis"
      activeItem="Reports"
    />
  </div>
</template>

background paints the items. The <nav> element has its own set — rootBackground, rootPadding, rootRadius, rootBorder, rootShadow and rootTranslucent — so a sidebar or topbar shell can be built from the component alone instead of a wrapper. All of them default to the inert value, so a navigation that asks for nothing renders no chrome of its own.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import { stack } from "@pindoba/styled-system/patterns";

// The `<nav>` is a Panel too: the `root*` props give it its own surface, so a
// sidebar shell needs no wrapper element. Items go `background="transparent"`
// so only the current row paints against the rail.
const labels = ["Overview", "Reports", "Settings"];
---

<div class={stack({ gap: "lg", direction: "row" })}>
  <Navigation
    direction="vertical"
    background="transparent"
    rootBackground="surface.hill"
    rootPadding="xs"
    rootRadius="xl"
    rootBorder="muted"
  >
    {
      labels.map((label) => (
        <NavigationItem
          label={label}
          href="#"
          direction="vertical"
          background="transparent"
          isActive={label === "Reports"}
        />
      ))
    }
  </Navigation>

  <Navigation
    direction="vertical"
    background="transparent"
    rootBackground="surface.ground"
    rootPadding="xs"
    rootRadius="xl"
    rootShadow="md"
  >
    {
      labels.map((label) => (
        <NavigationItem
          label={label}
          href="#"
          direction="vertical"
          background="transparent"
          activeEmphasis="tertiary"
          isActive={label === "Reports"}
        />
      ))
    }
  </Navigation>
</div>

import { Navigation } from "../Navigation";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];

// The `<nav>` is a Panel too: the `root*` props give it its own surface, so a
// sidebar shell needs no wrapper element. Items go `background="transparent"`
// so only the current row paints against the rail.
export default function SurfaceDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "row" })}>
      <Navigation
        items={items}
        direction="vertical"
        background="transparent"
        rootBackground="surface.hill"
        rootPadding="xs"
        rootRadius="xl"
        rootBorder="muted"
        activeItem="Reports"
      />
      <Navigation
        items={items}
        direction="vertical"
        background="transparent"
        rootBackground="surface.ground"
        rootPadding="xs"
        rootRadius="xl"
        rootShadow="md"
        activeEmphasis="tertiary"
        activeItem="Reports"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { label: "Overview", href: "#" },
    { label: "Reports", href: "#" },
    { label: "Settings", href: "#" },
  ];
</script>

<!-- The `<nav>` is a Panel too: the `root*` props give it its own surface, so a
     sidebar shell needs no wrapper element. Items go `background="transparent"`
     so only the current row paints against the rail. -->
<div class={stack({ gap: "lg", direction: "row" })}>
  <Navigation
    {items}
    direction="vertical"
    background="transparent"
    rootBackground="surface.hill"
    rootPadding="xs"
    rootRadius="xl"
    rootBorder="muted"
    activeItem="Reports"
  />
  <Navigation
    {items}
    direction="vertical"
    background="transparent"
    rootBackground="surface.ground"
    rootPadding="xs"
    rootRadius="xl"
    rootShadow="md"
    activeEmphasis="tertiary"
    activeItem="Reports"
  />
</div>

<script setup lang="ts">
import { Navigation } from "@pindoba/vue-navigation";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];
</script>

<!-- The `<nav>` is a Panel too: the `root*` props give it its own surface, so a
     sidebar shell needs no wrapper element. Items go `background="transparent"`
     so only the current row paints against the rail. -->
<template>
  <div :class="stack({ gap: 'lg', direction: 'row' })">
    <Navigation
      :items="items"
      direction="vertical"
      background="transparent"
      rootBackground="surface.hill"
      rootPadding="xs"
      rootRadius="xl"
      rootBorder="muted"
      activeItem="Reports"
    />
    <Navigation
      :items="items"
      direction="vertical"
      background="transparent"
      rootBackground="surface.ground"
      rootPadding="xs"
      rootRadius="xl"
      rootShadow="md"
      activeEmphasis="tertiary"
      activeItem="Reports"
    />
  </div>
</template>

Leading Icons

Place icons in the leading slot for a sidebar-style navigation. Any component works — lucide icons, custom SVGs, anything.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { FileText, House, Inbox, LogOut, Send } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", icon: House },
  { label: "Inbox", icon: Inbox },
  { label: "Drafts", icon: FileText },
  { label: "Sent", icon: Send },
  { label: "Logout", icon: LogOut },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical">
    {
      items.map((item) => {
        const LeadingIcon = item.icon;
        return (
          <NavigationItem
            label={item.label}
            href="#"
            direction="vertical"
            isActive={item.label === "Inbox"}
          >
            <Stamp slot="leading" emphasis="ghost">
              <LeadingIcon />
            </Stamp>
          </NavigationItem>
        );
      })
    }
  </Navigation>
</div>

import { Navigation } from "../Navigation";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

// Lucide-style inline SVGs wrapped in a <Stamp emphasis="ghost"> — the same
// row-metric square the svelte demo uses (`<Stamp emphasis="ghost"><LucideHouse /></Stamp>`).
// The Stamp constrains the glyph to `1em`; a bare SVG would render at its
// intrinsic 24px and overflow the row.
function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <Icon>{children}</Icon>
    </Stamp>
  );
}

const house = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const inbox = (
  <GhostIcon>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </GhostIcon>
);
const drafts = (
  <GhostIcon>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    <polyline points="14 2 14 8 20 8" />
  </GhostIcon>
);
const sent = (
  <GhostIcon>
    <path d="m22 2-7 20-4-9-9-4z" />
    <path d="M22 2 11 13" />
  </GhostIcon>
);
const logout = (
  <GhostIcon>
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
    <polyline points="16 17 21 12 16 7" />
    <line x1="21" y1="12" x2="9" y2="12" />
  </GhostIcon>
);

export default function LeadingIconsDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Navigation
        items={[
          { label: "Home", href: "#", leading: house },
          { label: "Inbox", href: "#", leading: inbox },
          { label: "Drafts", href: "#", leading: drafts },
          { label: "Sent", href: "#", leading: sent },
          { label: "Logout", href: "#", leading: logout },
        ]}
        activeItem="Inbox"
        direction="vertical"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideFileText from "@lucide/svelte/icons/file-text";
  import LucideSend from "@lucide/svelte/icons/send";
  import LucideLogOut from "@lucide/svelte/icons/log-out";
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet inbox()}
  <Stamp emphasis="ghost"><LucideInbox /></Stamp>
{/snippet}
{#snippet drafts()}
  <Stamp emphasis="ghost"><LucideFileText /></Stamp>
{/snippet}
{#snippet sent()}
  <Stamp emphasis="ghost"><LucideSend /></Stamp>
{/snippet}
{#snippet logout()}
  <Stamp emphasis="ghost"><LucideLogOut /></Stamp>
{/snippet}

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      { label: "Inbox", href: "#", leading: inbox },
      { label: "Drafts", href: "#", leading: drafts },
      { label: "Sent", href: "#", leading: sent },
      { label: "Logout", href: "#", leading: logout },
    ]}
    activeItem="Inbox"
    direction="vertical"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Inbox, FileText, Send, LogOut } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const items = [
  { label: "Home", href: "#", leading: ghost(House) },
  { label: "Inbox", href: "#", leading: ghost(Inbox) },
  { label: "Drafts", href: "#", leading: ghost(FileText) },
  { label: "Sent", href: "#", leading: ghost(Send) },
  { label: "Logout", href: "#", leading: ghost(LogOut) },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Navigation :items="items" activeItem="Inbox" direction="vertical" />
  </div>
</template>

Trailing Stamps

Use <Stamp> in the trailing slot for decorative indicators.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { Bell, Check, Shield, Star, Zap } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation>
    <NavigationItem label="Featured" href="#" isActive>
      <Stamp slot="trailing" size="xs" emphasis="adaptive" shape="circle">
        <Star />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Verified" href="#">
      <Stamp
        slot="trailing"
        size="xs"
        emphasis="secondary"
        feedback="success"
        shape="circle"
      >
        <Check />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Promoted" href="#">
      <Stamp
        slot="trailing"
        size="xs"
        emphasis="secondary"
        feedback="warning"
        shape="circle"
      >
        <Zap />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Subscribed" href="#">
      <Stamp slot="trailing" size="xs" emphasis="secondary" feedback="primary">
        <Bell />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Protected" href="#">
      <Stamp slot="trailing" size="xs" emphasis="secondary" feedback="neutral">
        <Shield />
      </Stamp>
    </NavigationItem>
  </Navigation>
</div>

import { Navigation } from "../Navigation";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

// Decorative trailing indicators are <Stamp>s — the size="xs" recipe sizes the
// `1em` glyph from a small lucide-style icon (matches the svelte demo).
function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={12}
      height={12}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

const star = (
  <Icon>
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
  </Icon>
);
const check = (
  <Icon>
    <polyline points="20 6 9 17 4 12" />
  </Icon>
);
const zap = (
  <Icon>
    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
  </Icon>
);
const bell = (
  <Icon>
    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
  </Icon>
);
const shield = (
  <Icon>
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
  </Icon>
);

export default function TrailingStampsDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Navigation
        items={[
          {
            label: "Featured",
            href: "#",
            trailing: (
              <Stamp size="xs" emphasis="primary" shape="circle">
                {star}
              </Stamp>
            ),
          },
          {
            label: "Verified",
            href: "#",
            trailing: (
              <Stamp
                size="xs"
                emphasis="secondary"
                feedback="success"
                shape="circle"
              >
                {check}
              </Stamp>
            ),
          },
          {
            label: "Promoted",
            href: "#",
            trailing: (
              <Stamp
                size="xs"
                emphasis="secondary"
                feedback="warning"
                shape="circle"
              >
                {zap}
              </Stamp>
            ),
          },
          {
            label: "Subscribed",
            href: "#",
            trailing: (
              <Stamp size="xs" emphasis="secondary" feedback="primary">
                {bell}
              </Stamp>
            ),
          },
          {
            label: "Protected",
            href: "#",
            trailing: (
              <Stamp size="xs" emphasis="secondary" feedback="neutral">
                {shield}
              </Stamp>
            ),
          },
        ]}
        activeItem="Featured"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideStar from "@lucide/svelte/icons/star";
  import LucideCheck from "@lucide/svelte/icons/check";
  import LucideZap from "@lucide/svelte/icons/zap";
  import LucideBell from "@lucide/svelte/icons/bell";
  import LucideShield from "@lucide/svelte/icons/shield";
</script>

{#snippet starStamp()}
  <Stamp size="xs" emphasis="primary" shape="circle">
    <LucideStar size={12} />
  </Stamp>
{/snippet}
{#snippet checkStamp()}
  <Stamp size="xs" emphasis="secondary" feedback="success" shape="circle">
    <LucideCheck size={12} />
  </Stamp>
{/snippet}
{#snippet zapStamp()}
  <Stamp size="xs" emphasis="secondary" feedback="warning" shape="circle">
    <LucideZap size={12} />
  </Stamp>
{/snippet}
{#snippet bellStamp()}
  <Stamp size="xs" emphasis="secondary" feedback="primary">
    <LucideBell size={12} />
  </Stamp>
{/snippet}
{#snippet shieldStamp()}
  <Stamp size="xs" emphasis="secondary" feedback="neutral">
    <LucideShield size={12} />
  </Stamp>
{/snippet}

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation
    items={[
      { label: "Featured", href: "#", trailing: starStamp },
      { label: "Verified", href: "#", trailing: checkStamp },
      { label: "Promoted", href: "#", trailing: zapStamp },
      { label: "Subscribed", href: "#", trailing: bellStamp },
      { label: "Protected", href: "#", trailing: shieldStamp },
    ]}
    activeItem="Featured"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { Star, Check, Zap, Bell, Shield } from "./_icons";

// The svelte demo passes `size={12}` to each lucide icon inside an xs Stamp;
// constrain the rendered svg to 12px to match.
const sized = (icon: Parameters<typeof h>[0]) =>
  h(
    "span",
    {
      class: css({
        display: "inline-flex",
        "& svg": { width: "12px", height: "12px" },
      }),
    },
    h(icon),
  );

const starStamp = h(
  Stamp,
  { size: "xs", emphasis: "primary", shape: "circle" },
  () => sized(Star),
);
const checkStamp = h(
  Stamp,
  { size: "xs", emphasis: "secondary", feedback: "success", shape: "circle" },
  () => sized(Check),
);
const zapStamp = h(
  Stamp,
  { size: "xs", emphasis: "secondary", feedback: "warning", shape: "circle" },
  () => sized(Zap),
);
const bellStamp = h(
  Stamp,
  { size: "xs", emphasis: "secondary", feedback: "primary" },
  () => sized(Bell),
);
const shieldStamp = h(
  Stamp,
  { size: "xs", emphasis: "secondary", feedback: "neutral" },
  () => sized(Shield),
);

const items = [
  { label: "Featured", href: "#", trailing: starStamp },
  { label: "Verified", href: "#", trailing: checkStamp },
  { label: "Promoted", href: "#", trailing: zapStamp },
  { label: "Subscribed", href: "#", trailing: bellStamp },
  { label: "Protected", href: "#", trailing: shieldStamp },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Navigation :items="items" activeItem="Featured" />
  </div>
</template>

Leading and Trailing Combined

Mix icons, badges, stamps, chevrons — leading and trailing are independent and accept any element.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import {
  Bell,
  ChevronRight,
  House,
  Inbox,
  Settings,
  Star,
} from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical">
    <NavigationItem label="Home" href="#" direction="vertical">
      <Stamp slot="leading" emphasis="ghost">
        <House />
      </Stamp>
      <Stamp slot="trailing" emphasis="ghost">
        <ChevronRight />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Inbox" href="#" direction="vertical" isActive>
      <Stamp slot="leading" emphasis="ghost">
        <Inbox />
      </Stamp>
      <Badge slot="trailing" emphasis="primary">12</Badge>
    </NavigationItem>
    <NavigationItem label="Notifications" href="#" direction="vertical">
      <Stamp slot="leading" emphasis="ghost">
        <Bell />
      </Stamp>
      <Badge slot="trailing" emphasis="secondary" feedback="success">
        New
      </Badge>
    </NavigationItem>
    <NavigationItem label="Settings" href="#" direction="vertical">
      <Stamp slot="leading" emphasis="ghost">
        <Settings />
      </Stamp>
      <Stamp slot="trailing" emphasis="primary" shape="circle">
        <Star />
      </Stamp>
    </NavigationItem>
  </Navigation>
</div>

import { Navigation } from "../Navigation";
import { Badge } from "@pindoba/react-badge";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

// Icons go through a <Stamp> so they render as a row-metric `1em` glyph
// instead of their intrinsic 24px (matches the svelte demo).
function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <Icon>{children}</Icon>
    </Stamp>
  );
}

const homeIcon = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const inboxIcon = (
  <GhostIcon>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </GhostIcon>
);
const bellIcon = (
  <GhostIcon>
    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
  </GhostIcon>
);
const settingsIcon = (
  <GhostIcon>
    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
    <circle cx="12" cy="12" r="3" />
  </GhostIcon>
);
const chevron = (
  <GhostIcon>
    <polyline points="9 18 15 12 9 6" />
  </GhostIcon>
);
const starIcon = (
  <Stamp emphasis="primary" shape="circle">
    <Icon>
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
    </Icon>
  </Stamp>
);

export default function LeadingAndTrailingDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Navigation
        items={[
          { label: "Home", href: "#", leading: homeIcon, trailing: chevron },
          {
            label: "Inbox",
            href: "#",
            leading: inboxIcon,
            trailing: <Badge emphasis="primary">12</Badge>,
          },
          {
            label: "Notifications",
            href: "#",
            leading: bellIcon,
            trailing: (
              <Badge emphasis="secondary" feedback="success">
                New
              </Badge>
            ),
          },
          {
            label: "Settings",
            href: "#",
            leading: settingsIcon,
            trailing: starIcon,
          },
        ]}
        activeItem="Inbox"
        direction="vertical"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideBell from "@lucide/svelte/icons/bell";
  import LucideSettings from "@lucide/svelte/icons/settings";
  import LucideStar from "@lucide/svelte/icons/star";
  import LucideChevronRight from "@lucide/svelte/icons/chevron-right";
</script>

{#snippet homeIcon()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet inboxIcon()}
  <Stamp emphasis="ghost"><LucideInbox /></Stamp>
{/snippet}
{#snippet bellIcon()}
  <Stamp emphasis="ghost"><LucideBell /></Stamp>
{/snippet}
{#snippet settingsIcon()}
  <Stamp emphasis="ghost"><LucideSettings /></Stamp>
{/snippet}

{#snippet count12()}
  <Badge emphasis="primary">12</Badge>
{/snippet}
{#snippet newBadge()}
  <Badge emphasis="secondary" feedback="success">New</Badge>
{/snippet}
{#snippet chevron()}
  <Stamp emphasis="ghost"><LucideChevronRight /></Stamp>
{/snippet}
{#snippet starStamp()}
  <Stamp emphasis="primary" shape="circle"><LucideStar /></Stamp>
{/snippet}

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: homeIcon, trailing: chevron },
      { label: "Inbox", href: "#", leading: inboxIcon, trailing: count12 },
      {
        label: "Notifications",
        href: "#",
        leading: bellIcon,
        trailing: newBadge,
      },
      {
        label: "Settings",
        href: "#",
        leading: settingsIcon,
        trailing: starStamp,
      },
    ]}
    activeItem="Inbox"
    direction="vertical"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Inbox, Bell, Settings, ChevronRight, Star } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const homeIcon = ghost(House);
const inboxIcon = ghost(Inbox);
const bellIcon = ghost(Bell);
const settingsIcon = ghost(Settings);

const chevron = ghost(ChevronRight);
const count12 = h(Badge, { emphasis: "primary" }, () => "12");
const newBadge = h(
  Badge,
  { emphasis: "secondary", feedback: "success" },
  () => "New",
);
const starStamp = h(Stamp, { emphasis: "primary", shape: "circle" }, () =>
  h(Star),
);

const items = [
  { label: "Home", href: "#", leading: homeIcon, trailing: chevron },
  { label: "Inbox", href: "#", leading: inboxIcon, trailing: count12 },
  {
    label: "Notifications",
    href: "#",
    leading: bellIcon,
    trailing: newBadge,
  },
  {
    label: "Settings",
    href: "#",
    leading: settingsIcon,
    trailing: starStamp,
  },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Navigation :items="items" activeItem="Inbox" direction="vertical" />
  </div>
</template>

Size with Trailing Badge

Badges composed in the trailing slot scale with the navigation size — each size maps to a smaller badge font-size token.

AstroReactSvelteVue

PreviewCode

xs

sm

md

lg

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Check, Star } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["xs", "sm", "md", "lg"] as const;
---

<div class={stack({ gap: "xl", direction: "column" })}>
  {
    sizes.map((size) => (
      <div>
        <h3>{size}</h3>
        <Navigation size={size}>
          <NavigationItem label="Home" href="#" size={size}>
            <Stamp slot="trailing" emphasis="primary" shape="circle">
              <Star />
            </Stamp>
          </NavigationItem>
          <NavigationItem label="Inbox" href="#" size={size} isActive>
            <Badge slot="trailing" emphasis="primary" feedback="primary">
              12
            </Badge>
          </NavigationItem>
          <NavigationItem label="Drafts" href="#" size={size}>
            <Badge slot="trailing" emphasis="secondary" feedback="neutral">
              3
            </Badge>
          </NavigationItem>
          <NavigationItem label="Sent" href="#" size={size}>
            <Stamp slot="trailing" emphasis="secondary" feedback="success">
              <Check />
            </Stamp>
          </NavigationItem>
        </Navigation>
      </div>
    ))
  }
</div>

xs

sm

md

lg

import { Navigation } from "../Navigation";
import { Badge } from "@pindoba/react-badge";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

// Decorative trailing indicators are <Stamp>s (matches the svelte demo); the
// Badge numbers below stay as <Badge>.
const star = (
  <Stamp emphasis="primary" shape="circle">
    <Icon>
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
    </Icon>
  </Stamp>
);
const check = (
  <Stamp emphasis="secondary" feedback="success">
    <Icon>
      <polyline points="20 6 9 17 4 12" />
    </Icon>
  </Stamp>
);

const twelve = (
  <Badge emphasis="primary" feedback="primary">
    12
  </Badge>
);
const three = (
  <Badge emphasis="secondary" feedback="neutral">
    3
  </Badge>
);

const items = [
  { label: "Home", href: "#", trailing: star },
  { label: "Inbox", href: "#", trailing: twelve },
  { label: "Drafts", href: "#", trailing: three },
  { label: "Sent", href: "#", trailing: check },
];

const sizes = ["xs", "sm", "md", "lg"] as const;

export default function SizeBadgeDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      {sizes.map((size) => (
        <div key={size}>
          <h3>{size}</h3>
          <Navigation items={items} activeItem="Inbox" size={size} />
        </div>
      ))}
    </div>
  );
}

xs

sm

md

lg

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideStar from "@lucide/svelte/icons/star";
  import LucideCheck from "@lucide/svelte/icons/check";
</script>

{#snippet twelve()}
  <Badge emphasis="primary" feedback="primary">12</Badge>
{/snippet}

{#snippet three()}
  <Badge emphasis="secondary" feedback="neutral">3</Badge>
{/snippet}

{#snippet starStamp()}
  <Stamp emphasis="primary" shape="circle"><LucideStar /></Stamp>
{/snippet}

{#snippet checkStamp()}
  <Stamp emphasis="secondary" feedback="success"><LucideCheck /></Stamp>
{/snippet}

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>xs</h3>
    <Navigation
      items={[
        { label: "Home", href: "#", trailing: starStamp },
        { label: "Inbox", href: "#", trailing: twelve },
        { label: "Drafts", href: "#", trailing: three },
        { label: "Sent", href: "#", trailing: checkStamp },
      ]}
      activeItem="Inbox"
      size="xs"
    />
  </div>
  <div>
    <h3>sm</h3>
    <Navigation
      items={[
        { label: "Home", href: "#", trailing: starStamp },
        { label: "Inbox", href: "#", trailing: twelve },
        { label: "Drafts", href: "#", trailing: three },
        { label: "Sent", href: "#", trailing: checkStamp },
      ]}
      activeItem="Inbox"
      size="sm"
    />
  </div>
  <div>
    <h3>md</h3>
    <Navigation
      items={[
        { label: "Home", href: "#", trailing: starStamp },
        { label: "Inbox", href: "#", trailing: twelve },
        { label: "Drafts", href: "#", trailing: three },
        { label: "Sent", href: "#", trailing: checkStamp },
      ]}
      activeItem="Inbox"
      size="md"
    />
  </div>
  <div>
    <h3>lg</h3>
    <Navigation
      items={[
        { label: "Home", href: "#", trailing: starStamp },
        { label: "Inbox", href: "#", trailing: twelve },
        { label: "Drafts", href: "#", trailing: three },
        { label: "Sent", href: "#", trailing: checkStamp },
      ]}
      activeItem="Inbox"
      size="lg"
    />
  </div>
</div>

xs

sm

md

lg

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { Star, Check } from "./_icons";

const starStamp = () =>
  h(Stamp, { emphasis: "primary", shape: "circle" }, () => h(Star));
const twelve = () =>
  h(Badge, { emphasis: "primary", feedback: "primary" }, () => "12");
const three = () =>
  h(Badge, { emphasis: "secondary", feedback: "neutral" }, () => "3");
const checkStamp = () =>
  h(Stamp, { emphasis: "secondary", feedback: "success" }, () => h(Check));

const makeItems = () => [
  { label: "Home", href: "#", trailing: starStamp() },
  { label: "Inbox", href: "#", trailing: twelve() },
  { label: "Drafts", href: "#", trailing: three() },
  { label: "Sent", href: "#", trailing: checkStamp() },
];

const sizes = ["xs", "sm", "md", "lg"] as const;
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div v-for="size in sizes" :key="size">
      <h3>{{ size }}</h3>
      <Navigation :items="makeItems()" activeItem="Inbox" :size="size" />
    </div>
  </div>
</template>

Compact: Icon + Label

Set compact="stack" to shrink each item to icon-over-label with ellipsis — useful for narrow rails where labels still need to read. The styled Tooltip is wired automatically from item.label, so hovering surfaces the full text without falling back to the native title tooltip.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { FileText, House, Inbox, LogOut, Send } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", icon: House },
  { label: "Inbox", icon: Inbox },
  { label: "Drafts", icon: FileText },
  { label: "Sent", icon: Send },
  { label: "Logout", icon: LogOut },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical" compact="stack">
    {
      items.map((item) => {
        const LeadingIcon = item.icon;
        return (
          <NavigationItem
            label={item.label}
            href="#"
            direction="vertical"
            compact="stack"
            isActive={item.label === "Inbox"}
          >
            <Stamp slot="leading" emphasis="ghost">
              <LeadingIcon />
            </Stamp>
          </NavigationItem>
        );
      })
    }
  </Navigation>
</div>

import { Navigation } from "../Navigation";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

// Icons go through a <Stamp> so they render as a row-metric `1em` glyph
// instead of their intrinsic 24px (matches the svelte demo).
function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <Icon>{children}</Icon>
    </Stamp>
  );
}

const home = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const inbox = (
  <GhostIcon>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </GhostIcon>
);
const drafts = (
  <GhostIcon>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    <polyline points="14 2 14 8 20 8" />
  </GhostIcon>
);
const sent = (
  <GhostIcon>
    <path d="m22 2-7 20-4-9-9-4z" />
    <path d="M22 2 11 13" />
  </GhostIcon>
);
const logout = (
  <GhostIcon>
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
    <polyline points="16 17 21 12 16 7" />
    <line x1="21" y1="12" x2="9" y2="12" />
  </GhostIcon>
);

export default function CompactStackDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Navigation
        items={[
          { label: "Home", href: "#", leading: home },
          { label: "Inbox", href: "#", leading: inbox },
          { label: "Drafts", href: "#", leading: drafts },
          { label: "Sent", href: "#", leading: sent },
          { label: "Logout", href: "#", leading: logout },
        ]}
        activeItem="Inbox"
        direction="vertical"
        compact="stack"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideFileText from "@lucide/svelte/icons/file-text";
  import LucideSend from "@lucide/svelte/icons/send";
  import LucideLogOut from "@lucide/svelte/icons/log-out";
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet inbox()}
  <Stamp emphasis="ghost"><LucideInbox /></Stamp>
{/snippet}
{#snippet drafts()}
  <Stamp emphasis="ghost"><LucideFileText /></Stamp>
{/snippet}
{#snippet sent()}
  <Stamp emphasis="ghost"><LucideSend /></Stamp>
{/snippet}
{#snippet logout()}
  <Stamp emphasis="ghost"><LucideLogOut /></Stamp>
{/snippet}

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      { label: "Inbox", href: "#", leading: inbox },
      { label: "Drafts", href: "#", leading: drafts },
      { label: "Sent", href: "#", leading: sent },
      { label: "Logout", href: "#", leading: logout },
    ]}
    activeItem="Inbox"
    direction="vertical"
    compact="stack"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Inbox, FileText, Send, LogOut } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const items = [
  { label: "Home", href: "#", leading: ghost(House) },
  { label: "Inbox", href: "#", leading: ghost(Inbox) },
  { label: "Drafts", href: "#", leading: ghost(FileText) },
  { label: "Sent", href: "#", leading: ghost(Send) },
  { label: "Logout", href: "#", leading: ghost(LogOut) },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Navigation
      :items="items"
      activeItem="Inbox"
      direction="vertical"
      compact="stack"
    />
  </div>
</template>

Compact: Icon Only

Set compact="icon" for a pure icon rail. Labels stay in the accessibility tree (visually hidden) and the auto-tooltip carries the name on hover, with placement derived from direction.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { FileText, House, Inbox, LogOut, Send } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", icon: House },
  { label: "Inbox", icon: Inbox },
  { label: "Drafts", icon: FileText },
  { label: "Sent", icon: Send },
  { label: "Logout", icon: LogOut },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical" compact="icon">
    {
      items.map((item) => {
        const LeadingIcon = item.icon;
        return (
          <NavigationItem
            label={item.label}
            href="#"
            direction="vertical"
            compact="icon"
            isActive={item.label === "Inbox"}
          >
            <Stamp slot="leading" emphasis="ghost">
              <LeadingIcon />
            </Stamp>
          </NavigationItem>
        );
      })
    }
  </Navigation>
</div>

import { Navigation } from "../Navigation";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

// Icons go through a <Stamp> so they render as a row-metric `1em` glyph
// instead of their intrinsic 24px (matches the svelte demo).
function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <Icon>{children}</Icon>
    </Stamp>
  );
}

const home = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const inbox = (
  <GhostIcon>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </GhostIcon>
);
const drafts = (
  <GhostIcon>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    <polyline points="14 2 14 8 20 8" />
  </GhostIcon>
);
const sent = (
  <GhostIcon>
    <path d="m22 2-7 20-4-9-9-4z" />
    <path d="M22 2 11 13" />
  </GhostIcon>
);
const logout = (
  <GhostIcon>
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
    <polyline points="16 17 21 12 16 7" />
    <line x1="21" y1="12" x2="9" y2="12" />
  </GhostIcon>
);

export default function CompactIconDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Navigation
        items={[
          { label: "Home", href: "#", leading: home },
          { label: "Inbox", href: "#", leading: inbox },
          { label: "Drafts", href: "#", leading: drafts },
          { label: "Sent", href: "#", leading: sent },
          { label: "Logout", href: "#", leading: logout },
        ]}
        activeItem="Inbox"
        direction="vertical"
        compact="icon"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideFileText from "@lucide/svelte/icons/file-text";
  import LucideSend from "@lucide/svelte/icons/send";
  import LucideLogOut from "@lucide/svelte/icons/log-out";
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet inbox()}
  <Stamp emphasis="ghost"><LucideInbox /></Stamp>
{/snippet}
{#snippet drafts()}
  <Stamp emphasis="ghost"><LucideFileText /></Stamp>
{/snippet}
{#snippet sent()}
  <Stamp emphasis="ghost"><LucideSend /></Stamp>
{/snippet}
{#snippet logout()}
  <Stamp emphasis="ghost"><LucideLogOut /></Stamp>
{/snippet}

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      { label: "Inbox", href: "#", leading: inbox },
      { label: "Drafts", href: "#", leading: drafts },
      { label: "Sent", href: "#", leading: sent },
      { label: "Logout", href: "#", leading: logout },
    ]}
    activeItem="Inbox"
    direction="vertical"
    compact="icon"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Inbox, FileText, Send, LogOut } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const items = [
  { label: "Home", href: "#", leading: ghost(House) },
  { label: "Inbox", href: "#", leading: ghost(Inbox) },
  { label: "Drafts", href: "#", leading: ghost(FileText) },
  { label: "Sent", href: "#", leading: ghost(Send) },
  { label: "Logout", href: "#", leading: ghost(LogOut) },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Navigation
      :items="items"
      activeItem="Inbox"
      direction="vertical"
      compact="icon"
    />
  </div>
</template>

Toggling Compact Mode

Consumers drive the compact prop from layout state. Cycle between none, stack, and icon to see how the same items adapt. With compactToggle, items that have children stay reachable while collapsed: hovering or focusing the folded parent row opens a rail flyout panel with the full labels — in every framework.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import { stack } from "@pindoba/styled-system/patterns";
import StampBox from "./parts/stamp-box.astro";
import StampHouse from "./parts/stamp-house.astro";
import StampSettings from "./parts/stamp-settings.astro";

// ONE live instance. `compactToggle` makes the connect render the runtime-safe
// structure, and the recipe keys every compact style off the root's
// `data-compact` attribute — so the client script below just flips that
// attribute and the rail morph animates in place. Matches the svelte demo's
// `none` → `stack` → `icon` cycle.
const items = [
  { id: "home", label: "Home", href: "#", leading: StampHouse },
  {
    id: "storage",
    label: "Storage",
    leading: StampBox,
    defaultExpanded: true,
    // Children stay reachable while collapsed through the rail flyout —
    // hover/focus the folded row and the panel opens with the full labels.
    items: [
      { id: "buckets", label: "Buckets", href: "#buckets" },
      { id: "snapshots", label: "Snapshots", href: "#snapshots" },
      { id: "archive", label: "Archive", href: "#archive" },
    ],
  },
  { id: "settings", label: "Settings", href: "#", leading: StampSettings },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <button type="button" data-compact-toggle>compact: none</button>
  <Navigation
    direction="vertical"
    compactToggle
    activeItem="snapshots"
    data-compact-demo
    items={items}
  />
</div>

<script>
  const modes = ["none", "stack", "icon"] as const;

  document
    .querySelectorAll<HTMLButtonElement>("[data-compact-toggle]")
    .forEach((button) => {
      const nav = button
        .closest("div")
        ?.querySelector<HTMLElement>("[data-compact-demo]");
      if (!nav) return;

      let index = 0;

      button.addEventListener("click", () => {
        index = (index + 1) % modes.length;
        const next = modes[index];
        button.textContent = `compact: ${next}`;
        // The public runtime contract: set `data-compact="stack" | "icon"` on
        // the root `<nav>` to collapse, remove it to expand.
        if (next === "none") nav.removeAttribute("data-compact");
        else nav.setAttribute("data-compact", next);
      });
    });
</script>

import { Navigation } from "../Navigation";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { useState, type ReactNode } from "react";

function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

// Icons go through a <Stamp> so they render as a row-metric `1em` glyph
// instead of their intrinsic 24px (matches the svelte demo).
function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <Icon>{children}</Icon>
    </Stamp>
  );
}

const home = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const products = (
  <GhostIcon>
    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
    <path d="m3.3 7 8.7 5 8.7-5" />
    <path d="M12 22V12" />
  </GhostIcon>
);
const inbox = (
  <GhostIcon>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </GhostIcon>
);
const drafts = (
  <GhostIcon>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    <polyline points="14 2 14 8 20 8" />
  </GhostIcon>
);
const sent = (
  <GhostIcon>
    <path d="m22 2-7 20-4-9-9-4z" />
    <path d="M22 2 11 13" />
  </GhostIcon>
);
const logout = (
  <GhostIcon>
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
    <polyline points="16 17 21 12 16 7" />
    <line x1="21" y1="12" x2="9" y2="12" />
  </GhostIcon>
);

const modes = ["none", "stack", "icon"] as const;
type CompactMode = (typeof modes)[number];

export default function CompactToggleDemo() {
  const [compact, setCompact] = useState<CompactMode>("none");

  function cycle() {
    const i = modes.indexOf(compact);
    setCompact(modes[(i + 1) % modes.length]);
  }

  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <button type="button" onClick={cycle}>
        compact: {compact}
      </button>
      <Navigation
        items={[
          { label: "Home", href: "#", leading: home },
          {
            label: "Products",
            leading: products,
            defaultExpanded: true,
            items: [
              { label: "Analytics", href: "#analytics" },
              { label: "Reports", href: "#reports" },
              { label: "Exports", href: "#exports" },
            ],
          },
          { label: "Inbox", href: "#", leading: inbox },
          { label: "Drafts", href: "#", leading: drafts },
          { label: "Sent", href: "#", leading: sent },
          { label: "Logout", href: "#", leading: logout },
        ]}
        activeItem="Inbox"
        direction="vertical"
        compact={compact}
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideBox from "@lucide/svelte/icons/box";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideFileText from "@lucide/svelte/icons/file-text";
  import LucideSend from "@lucide/svelte/icons/send";
  import LucideLogOut from "@lucide/svelte/icons/log-out";

  type CompactMode = "none" | "stack" | "icon";
  const modes: CompactMode[] = ["none", "stack", "icon"];
  let compact = $state<CompactMode>("none");

  function cycle() {
    const i = modes.indexOf(compact);
    compact = modes[(i + 1) % modes.length] as CompactMode;
  }
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet products()}
  <Stamp emphasis="ghost"><LucideBox /></Stamp>
{/snippet}
{#snippet inbox()}
  <Stamp emphasis="ghost"><LucideInbox /></Stamp>
{/snippet}
{#snippet drafts()}
  <Stamp emphasis="ghost"><LucideFileText /></Stamp>
{/snippet}
{#snippet sent()}
  <Stamp emphasis="ghost"><LucideSend /></Stamp>
{/snippet}
{#snippet logout()}
  <Stamp emphasis="ghost"><LucideLogOut /></Stamp>
{/snippet}

<div class={stack({ gap: "md", direction: "column" })}>
  <button type="button" onclick={cycle}>compact: {compact}</button>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      {
        label: "Products",
        leading: products,
        defaultExpanded: true,
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Reports", href: "#reports" },
          { label: "Exports", href: "#exports" },
        ],
      },
      { label: "Inbox", href: "#", leading: inbox },
      { label: "Drafts", href: "#", leading: drafts },
      { label: "Sent", href: "#", leading: sent },
      { label: "Logout", href: "#", leading: logout },
    ]}
    activeItem="Inbox"
    direction="vertical"
    {compact}
  />
</div>

<script setup lang="ts">
import { computed, h, ref } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Package, Inbox, FileText, Send, LogOut } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const items = computed(() => [
  { label: "Home", href: "#", leading: ghost(House) },
  {
    label: "Products",
    leading: ghost(Package),
    defaultExpanded: true,
    items: [
      { label: "Analytics", href: "#analytics" },
      { label: "Reports", href: "#reports" },
      { label: "Exports", href: "#exports" },
    ],
  },
  { label: "Inbox", href: "#", leading: ghost(Inbox) },
  { label: "Drafts", href: "#", leading: ghost(FileText) },
  { label: "Sent", href: "#", leading: ghost(Send) },
  { label: "Logout", href: "#", leading: ghost(LogOut) },
]);

const modes = ["none", "stack", "icon"] as const;
type CompactMode = (typeof modes)[number];
const compact = ref<CompactMode>("none");

function cycle() {
  const i = modes.indexOf(compact.value);
  compact.value = modes[(i + 1) % modes.length] as CompactMode;
}
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <button type="button" @click="cycle">compact: {{ compact }}</button>
    <Navigation
      :items="items"
      activeItem="Inbox"
      direction="vertical"
      :compact="compact"
    />
  </div>
</template>

Sections

Group items into titled sections with the sections prop instead of a flat items array. Each section becomes a labelled group (role="group" + aria-labelledby pointing at its heading), so assistive tech announces the group name. Sections work best in direction="vertical" sidebars. A plain items array keeps working exactly as before.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import { stack } from "@pindoba/styled-system/patterns";

const sections = [
  {
    title: "Main",
    items: [
      { label: "Dashboard", href: "#" },
      { label: "Projects", href: "#" },
      { label: "Reports", href: "#" },
    ],
  },
  {
    title: "Account",
    items: [
      { label: "Profile", href: "#" },
      { label: "Billing", href: "#" },
      { label: "Logout", href: "#" },
    ],
  },
];
---

<div class={stack({ gap: "md", direction: "column", justify: "center" })}>
  <Navigation
    direction="vertical"
    emphasis="tertiary"
    sections={sections}
    activeItem="Dashboard"
  />
</div>

import { Navigation } from "../Navigation";
import { stack } from "@pindoba/styled-system/patterns";

const sections = [
  {
    title: "Main",
    items: [
      { label: "Dashboard", href: "#" },
      { label: "Projects", href: "#" },
      { label: "Reports", href: "#" },
    ],
  },
  {
    title: "Account",
    items: [
      { label: "Profile", href: "#" },
      { label: "Billing", href: "#" },
      { label: "Logout", href: "#" },
    ],
  },
];

export default function SectionsDemo() {
  return (
    <div
      className={stack({ gap: "md", direction: "column", justify: "center" })}
    >
      <Navigation
        direction="vertical"
        emphasis="tertiary"
        sections={sections}
        activeItem="Dashboard"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const sections = [
    {
      title: "Main",
      items: [
        { label: "Dashboard", href: "#" },
        { label: "Projects", href: "#" },
        { label: "Reports", href: "#" },
      ],
    },
    {
      title: "Account",
      items: [
        { label: "Profile", href: "#" },
        { label: "Billing", href: "#" },
        { label: "Logout", href: "#" },
      ],
    },
  ];
</script>

<div class={stack({ gap: "md", direction: "column", justify: "center" })}>
  <Navigation
    direction="vertical"
    emphasis="tertiary"
    {sections}
    activeItem="Dashboard"
  />
</div>

<script setup lang="ts">
import { Navigation } from "@pindoba/vue-navigation";
import { stack } from "@pindoba/styled-system/patterns";

const sections = [
  {
    title: "Main",
    items: [
      { label: "Dashboard", href: "#" },
      { label: "Projects", href: "#" },
      { label: "Reports", href: "#" },
    ],
  },
  {
    title: "Account",
    items: [
      { label: "Profile", href: "#" },
      { label: "Billing", href: "#" },
      { label: "Logout", href: "#" },
    ],
  },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', justify: 'center' })">
    <Navigation
      direction="vertical"
      emphasis="tertiary"
      :sections="sections"
      activeItem="Dashboard"
    />
  </div>
</template>

Per-Item Tooltips

Pass tooltip on any item to override the auto-derived tooltip. Accepts a string or { content, placement }. Items without tooltip show no tooltip outside compact mode.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { FileText, House, Inbox, Send } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", icon: House, tooltip: "Go home" },
  {
    label: "Inbox",
    icon: Inbox,
    tooltip: { content: "12 unread", placement: "right" as const },
  },
  { label: "Drafts", icon: FileText, tooltip: "Drafts (3)" },
  { label: "Sent", icon: Send },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical">
    {
      items.map((item) => {
        const LeadingIcon = item.icon;
        return (
          <NavigationItem
            label={item.label}
            href="#"
            direction="vertical"
            tooltip={item.tooltip}
            isActive={item.label === "Inbox"}
          >
            <Stamp slot="leading" emphasis="ghost">
              <LeadingIcon />
            </Stamp>
          </NavigationItem>
        );
      })
    }
  </Navigation>
</div>

import { Navigation } from "../Navigation";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

// Per-item `tooltip` is surfaced via <Tooltip> (a string or `{ content,
// placement }`); the anchor becomes the tooltip trigger on hover/focus —
// matching the Svelte/Astro navigation demos.
function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

// Icons go through a <Stamp> so they render as a row-metric `1em` glyph
// instead of their intrinsic 24px (matches the svelte demo).
function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <Icon>{children}</Icon>
    </Stamp>
  );
}

const home = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const inbox = (
  <GhostIcon>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </GhostIcon>
);
const drafts = (
  <GhostIcon>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    <polyline points="14 2 14 8 20 8" />
  </GhostIcon>
);
const sent = (
  <GhostIcon>
    <path d="m22 2-7 20-4-9-9-4z" />
    <path d="M22 2 11 13" />
  </GhostIcon>
);

export default function WithTooltipsDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Navigation
        items={[
          { label: "Home", href: "#", leading: home, tooltip: "Go home" },
          {
            label: "Inbox",
            href: "#",
            leading: inbox,
            tooltip: { content: "12 unread", placement: "right" },
          },
          {
            label: "Drafts",
            href: "#",
            leading: drafts,
            tooltip: "Drafts (3)",
          },
          { label: "Sent", href: "#", leading: sent },
        ]}
        activeItem="Inbox"
        direction="vertical"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideFileText from "@lucide/svelte/icons/file-text";
  import LucideSend from "@lucide/svelte/icons/send";
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet inbox()}
  <Stamp emphasis="ghost"><LucideInbox /></Stamp>
{/snippet}
{#snippet drafts()}
  <Stamp emphasis="ghost"><LucideFileText /></Stamp>
{/snippet}
{#snippet sent()}
  <Stamp emphasis="ghost"><LucideSend /></Stamp>
{/snippet}

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home, tooltip: "Go home" },
      {
        label: "Inbox",
        href: "#",
        leading: inbox,
        tooltip: { content: "12 unread", placement: "right" },
      },
      { label: "Drafts", href: "#", leading: drafts, tooltip: "Drafts (3)" },
      { label: "Sent", href: "#", leading: sent },
    ]}
    activeItem="Inbox"
    direction="vertical"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Inbox, FileText, Send } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const items = [
  { label: "Home", href: "#", leading: ghost(House), tooltip: "Go home" },
  {
    label: "Inbox",
    href: "#",
    leading: ghost(Inbox),
    tooltip: { content: "12 unread", placement: "right" as const },
  },
  {
    label: "Drafts",
    href: "#",
    leading: ghost(FileText),
    tooltip: "Drafts (3)",
  },
  { label: "Sent", href: "#", leading: ghost(Send) },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Navigation :items="items" activeItem="Inbox" direction="vertical" />
  </div>
</template>

Compact: Trailing Badges

In compact modes the inline trailing slot is hidden — the same trailing content floats over the item’s corner as an <Attachment> instead, so unread counts survive the collapse.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { FileText, House, Inbox, Send } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const modes = ["icon", "stack"] as const;
---

{
  /* In compact modes the inline trailing slot is hidden — the same trailing
    content floats over the item's corner as an Attachment instead. */
}
<div class={stack({ gap: "xl", direction: "row" })}>
  {
    modes.map((mode) => (
      <Navigation direction="vertical" compact={mode}>
        <NavigationItem
          label="Home"
          href="#"
          direction="vertical"
          compact={mode}
        >
          <Stamp slot="leading" emphasis="ghost">
            <House />
          </Stamp>
        </NavigationItem>
        <NavigationItem
          label="Inbox"
          href="#"
          direction="vertical"
          compact={mode}
          isActive
        >
          <Stamp slot="leading" emphasis="ghost">
            <Inbox />
          </Stamp>
          <Badge slot="trailing" size="xs" emphasis="primary" feedback="danger">
            12
          </Badge>
        </NavigationItem>
        <NavigationItem
          label="Drafts"
          href="#"
          direction="vertical"
          compact={mode}
        >
          <Stamp slot="leading" emphasis="ghost">
            <FileText />
          </Stamp>
          <Badge
            slot="trailing"
            size="xs"
            emphasis="secondary"
            feedback="neutral"
          >
            3
          </Badge>
        </NavigationItem>
        <NavigationItem
          label="Sent"
          href="#"
          direction="vertical"
          compact={mode}
        >
          <Stamp slot="leading" emphasis="ghost">
            <Send />
          </Stamp>
        </NavigationItem>
      </Navigation>
    ))
  }
</div>

import { Navigation } from "../Navigation";
import Badge from "@pindoba/react-badge";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={24}
        height={24}
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {children}
      </svg>
    </Stamp>
  );
}

const home = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const inbox = (
  <GhostIcon>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </GhostIcon>
);
const drafts = (
  <GhostIcon>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    <polyline points="14 2 14 8 20 8" />
  </GhostIcon>
);
const sent = (
  <GhostIcon>
    <path d="m22 2-7 20-4-9-9-4z" />
    <path d="M22 2 11 13" />
  </GhostIcon>
);

const twelve = (
  <Badge size="xs" emphasis="primary" feedback="danger">
    12
  </Badge>
);
const three = (
  <Badge size="xs" emphasis="secondary" feedback="neutral">
    3
  </Badge>
);

// In compact modes the inline trailing slot is hidden — the same trailing
// content floats over the item's corner as an Attachment instead.
export default function CompactBadgesDemo() {
  const navItems = [
    { label: "Home", href: "#", leading: home },
    { label: "Inbox", href: "#", leading: inbox, trailing: twelve },
    { label: "Drafts", href: "#", leading: drafts, trailing: three },
    { label: "Sent", href: "#", leading: sent },
  ];
  return (
    <div className={stack({ gap: "xl", direction: "row" })}>
      <Navigation
        items={navItems}
        activeItem="Inbox"
        direction="vertical"
        compact="icon"
      />
      <Navigation
        items={navItems}
        activeItem="Inbox"
        direction="vertical"
        compact="stack"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideFileText from "@lucide/svelte/icons/file-text";
  import LucideSend from "@lucide/svelte/icons/send";
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet inbox()}
  <Stamp emphasis="ghost"><LucideInbox /></Stamp>
{/snippet}
{#snippet drafts()}
  <Stamp emphasis="ghost"><LucideFileText /></Stamp>
{/snippet}
{#snippet sent()}
  <Stamp emphasis="ghost"><LucideSend /></Stamp>
{/snippet}

{#snippet twelve()}
  <Badge size="xs" emphasis="primary" feedback="danger">12</Badge>
{/snippet}
{#snippet three()}
  <Badge size="xs" emphasis="secondary" feedback="neutral">3</Badge>
{/snippet}

<!-- In compact modes the inline trailing slot is hidden — the same trailing
     content floats over the item's corner as an Attachment instead. -->
<div class={stack({ gap: "xl", direction: "row" })}>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      { label: "Inbox", href: "#", leading: inbox, trailing: twelve },
      { label: "Drafts", href: "#", leading: drafts, trailing: three },
      { label: "Sent", href: "#", leading: sent },
    ]}
    activeItem="Inbox"
    direction="vertical"
    compact="icon"
  />
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      { label: "Inbox", href: "#", leading: inbox, trailing: twelve },
      { label: "Drafts", href: "#", leading: drafts, trailing: three },
      { label: "Sent", href: "#", leading: sent },
    ]}
    activeItem="Inbox"
    direction="vertical"
    compact="stack"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Inbox, FileText, Send } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const twelve = () =>
  h(Badge, { size: "xs", emphasis: "primary", feedback: "danger" }, () => "12");
const three = () =>
  h(
    Badge,
    { size: "xs", emphasis: "secondary", feedback: "neutral" },
    () => "3",
  );

// In compact modes the inline trailing slot is hidden — the same trailing
// content floats over the item's corner as an Attachment instead.
const makeItems = () => [
  { label: "Home", href: "#", leading: ghost(House) },
  { label: "Inbox", href: "#", leading: ghost(Inbox), trailing: twelve() },
  { label: "Drafts", href: "#", leading: ghost(FileText), trailing: three() },
  { label: "Sent", href: "#", leading: ghost(Send) },
];
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'row' })">
    <Navigation
      :items="makeItems()"
      activeItem="Inbox"
      direction="vertical"
      compact="icon"
    />
    <Navigation
      :items="makeItems()"
      activeItem="Inbox"
      direction="vertical"
      compact="stack"
    />
  </div>
</template>

Compact: Badge Placement

trailingAttachment takes the <Attachment> positioning props (placement, anchor, shape, hugCorners, offset/offsetX/offsetY, flip, shift, padding) and applies them to every item’s badge. Any item can override it with its own trailingAttachment, and either level accepts false to switch the attachment off — the trailing content is then simply not shown while compact. passThrough.trailingAttachment.props still overrides everything as the raw escape hatch.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { FileText, House, Inbox } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { NavigationTrailingAttachment } from "@pindoba/core-navigation";

// The standalone `<NavigationItem>` takes the same `trailingAttachment` config
// as the composed `<Navigation items={…} />` form.
const rails: {
  caption: string;
  inbox?: NavigationTrailingAttachment;
  drafts?: NavigationTrailingAttachment;
}[] = [
  // Default: top-end, hugging the item's rounded corner.
  { caption: "default" },
  // Moved for both badges.
  {
    caption: "bottom-end",
    inbox: { placement: "bottom-end", offset: 2 },
    drafts: { placement: "bottom-end", offset: 2 },
  },
  // Per item: one badge moved, one attachment switched off.
  { caption: "per item", inbox: { placement: "top-start" }, drafts: false },
];
---

<div class={stack({ gap: "xl", direction: "row" })}>
  {
    rails.map((rail) => (
      <Navigation direction="vertical" compact="icon">
        <NavigationItem
          label="Home"
          href="#"
          direction="vertical"
          compact="icon"
        >
          <Stamp slot="leading" emphasis="ghost">
            <House />
          </Stamp>
        </NavigationItem>
        <NavigationItem
          label="Inbox"
          href="#"
          direction="vertical"
          compact="icon"
          trailingAttachment={rail.inbox}
          isActive
        >
          <Stamp slot="leading" emphasis="ghost">
            <Inbox />
          </Stamp>
          <Badge slot="trailing" size="xs" emphasis="primary" feedback="danger">
            12
          </Badge>
        </NavigationItem>
        <NavigationItem
          label="Drafts"
          href="#"
          direction="vertical"
          compact="icon"
          trailingAttachment={rail.drafts}
        >
          <Stamp slot="leading" emphasis="ghost">
            <FileText />
          </Stamp>
          <Badge
            slot="trailing"
            size="xs"
            emphasis="secondary"
            feedback="neutral"
          >
            3
          </Badge>
        </NavigationItem>
      </Navigation>
    ))
  }
</div>

import { Navigation } from "../Navigation";
import Badge from "@pindoba/react-badge";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={24}
        height={24}
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {children}
      </svg>
    </Stamp>
  );
}

const home = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const inbox = (
  <GhostIcon>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </GhostIcon>
);
const drafts = (
  <GhostIcon>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    <polyline points="14 2 14 8 20 8" />
  </GhostIcon>
);

const twelve = (
  <Badge size="xs" emphasis="primary" feedback="danger">
    12
  </Badge>
);
const three = (
  <Badge size="xs" emphasis="secondary" feedback="neutral">
    3
  </Badge>
);

export default function CompactBadgePlacementDemo() {
  const navItems = [
    { label: "Home", href: "#", leading: home },
    { label: "Inbox", href: "#", leading: inbox, trailing: twelve },
    { label: "Drafts", href: "#", leading: drafts, trailing: three },
  ];
  return (
    <div className={stack({ gap: "xl", direction: "row" })}>
      {/* Default: top-end, hugging the item's rounded corner. */}
      <Navigation
        items={navItems}
        activeItem="Inbox"
        direction="vertical"
        compact="icon"
      />

      {/* Moved for the whole navigation. */}
      <Navigation
        items={navItems}
        activeItem="Inbox"
        direction="vertical"
        compact="icon"
        trailingAttachment={{ placement: "bottom-end", offset: 2 }}
      />

      {/* Per item: one badge moved, one attachment switched off. */}
      <Navigation
        items={[
          navItems[0]!,
          { ...navItems[1]!, trailingAttachment: { placement: "top-start" } },
          { ...navItems[2]!, trailingAttachment: false },
        ]}
        activeItem="Inbox"
        direction="vertical"
        compact="icon"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideFileText from "@lucide/svelte/icons/file-text";
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet inbox()}
  <Stamp emphasis="ghost"><LucideInbox /></Stamp>
{/snippet}
{#snippet drafts()}
  <Stamp emphasis="ghost"><LucideFileText /></Stamp>
{/snippet}

{#snippet twelve()}
  <Badge size="xs" emphasis="primary" feedback="danger">12</Badge>
{/snippet}
{#snippet three()}
  <Badge size="xs" emphasis="secondary" feedback="neutral">3</Badge>
{/snippet}

<div class={stack({ gap: "xl", direction: "row" })}>
  <!-- Default: top-end, hugging the item's rounded corner. -->
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      { label: "Inbox", href: "#", leading: inbox, trailing: twelve },
      { label: "Drafts", href: "#", leading: drafts, trailing: three },
    ]}
    activeItem="Inbox"
    direction="vertical"
    compact="icon"
  />

  <!-- Moved for the whole navigation. -->
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      { label: "Inbox", href: "#", leading: inbox, trailing: twelve },
      { label: "Drafts", href: "#", leading: drafts, trailing: three },
    ]}
    activeItem="Inbox"
    direction="vertical"
    compact="icon"
    trailingAttachment={{ placement: "bottom-end", offset: 2 }}
  />

  <!-- Per item: one badge moved, one attachment switched off. -->
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      {
        label: "Inbox",
        href: "#",
        leading: inbox,
        trailing: twelve,
        trailingAttachment: { placement: "top-start" },
      },
      {
        label: "Drafts",
        href: "#",
        leading: drafts,
        trailing: three,
        trailingAttachment: false,
      },
    ]}
    activeItem="Inbox"
    direction="vertical"
    compact="icon"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Inbox, FileText } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const twelve = () =>
  h(Badge, { size: "xs", emphasis: "primary", feedback: "danger" }, () => "12");
const three = () =>
  h(
    Badge,
    { size: "xs", emphasis: "secondary", feedback: "neutral" },
    () => "3",
  );

const makeItems = () => [
  { label: "Home", href: "#", leading: ghost(House) },
  { label: "Inbox", href: "#", leading: ghost(Inbox), trailing: twelve() },
  { label: "Drafts", href: "#", leading: ghost(FileText), trailing: three() },
];

// Per item: one badge moved, one attachment switched off.
const perItemItems = () => {
  const [home, inbox, drafts] = makeItems();
  return [
    home,
    { ...inbox, trailingAttachment: { placement: "top-start" as const } },
    { ...drafts, trailingAttachment: false as const },
  ];
};
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'row' })">
    <!-- Default: top-end, hugging the item's rounded corner. -->
    <Navigation
      :items="makeItems()"
      activeItem="Inbox"
      direction="vertical"
      compact="icon"
    />

    <!-- Moved for the whole navigation. -->
    <Navigation
      :items="makeItems()"
      :trailingAttachment="{ placement: 'bottom-end', offset: 2 }"
      activeItem="Inbox"
      direction="vertical"
      compact="icon"
    />

    <Navigation
      :items="perItemItems()"
      activeItem="Inbox"
      direction="vertical"
      compact="icon"
    />
  </div>
</template>

Borders

Items have no border by default. border paints the resting line, borderInteract the hover/press line, and borderActive the current item’s — these are Panel’s own props, taking the same token levels (none, default, bold, muted, accent), so a border can appear only on hover or only on the active row.

borderActive defaults to inherit, meaning “keep the ring activeEmphasis chose”; pass none to explicitly clear the line in that state (e.g. an outline on every row except the current one). The active item’s border holds while it’s hovered, so a borderInteract color can’t steal it.

The 1px border is reserved at every level, so switching levels or states never shifts the row. appearance="tabs" (the tab-strip treatment) owns the item’s edge itself and ignores these props.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { NavigationBaseProps } from "@pindoba/core-navigation";

// Items reserve a 1px border at every level, so switching levels or states
// never shifts the row. The three props are independent: a border can show only
// on hover, or only on the current item. In the composed Astro form each
// `<NavigationItem>` takes its own style props (there's no context cascade).
type Border = NavigationBaseProps["border"];
const rows: {
  border?: Border;
  borderInteract?: Border;
  borderActive?: Border;
}[] = [
  // No border (the default).
  {},
  // A resting outline on every item, brighter under the pointer.
  { border: "muted", borderInteract: "default" },
  // Borderless at rest — the outline is the current item's affordance.
  { borderActive: "accent" },
  // Hover-only outline.
  { borderInteract: "bold" },
  // Outline on every row EXCEPT the current one.
  { border: "muted", borderActive: "none" },
];
const labels = ["Overview", "Reports", "Settings"];
---

<div class={stack({ gap: "lg" })}>
  {
    rows.map((row) => (
      <Navigation>
        {labels.map((label) => (
          <NavigationItem
            label={label}
            href="#"
            isActive={label === "Overview"}
            {...row}
          />
        ))}
      </Navigation>
    ))
  }
</div>

import { Navigation } from "../Navigation";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];

// Items reserve a 1px border at every level, so switching levels or states
// never shifts the row. The three props are independent: a border can show only
// on hover, or only on the current item.
export default function ItemBordersDemo() {
  return (
    <div className={stack({ gap: "lg" })}>
      {/* No border (the default). */}
      <Navigation items={items} activeItem="Overview" />

      {/* A resting outline on every item, brighter under the pointer. */}
      <Navigation
        items={items}
        activeItem="Overview"
        border="muted"
        borderInteract="default"
      />

      {/* Borderless at rest — the outline is the current item's affordance. */}
      <Navigation items={items} activeItem="Overview" borderActive="accent" />

      {/* Outline on every row EXCEPT the current one. */}
      <Navigation
        items={items}
        activeItem="Overview"
        border="muted"
        borderActive="none"
      />

      {/* Hover-only outline. */}
      <Navigation items={items} activeItem="Overview" borderInteract="bold" />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { label: "Overview", href: "#" },
    { label: "Reports", href: "#" },
    { label: "Settings", href: "#" },
  ];
</script>

<!-- Items reserve a 1px border at every level, so switching levels or states
     never shifts the row. The three props are independent: a border can show
     only on hover, or only on the current item. -->
<div class={stack({ gap: "lg" })}>
  <!-- No border (the default). -->
  <Navigation {items} activeItem="Overview" />

  <!-- A resting outline on every item, brighter under the pointer. -->
  <Navigation
    {items}
    activeItem="Overview"
    border="muted"
    borderInteract="default"
  />

  <!-- Borderless at rest — the outline is the current item's affordance. -->
  <Navigation {items} activeItem="Overview" borderActive="accent" />

  <!-- Hover-only outline. -->
  <Navigation {items} activeItem="Overview" borderInteract="bold" />

  <!-- Outline on every row EXCEPT the current one. -->
  <Navigation
    {items}
    activeItem="Overview"
    border="muted"
    borderActive="none"
  />
</div>

<script setup lang="ts">
import { Navigation } from "@pindoba/vue-navigation";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];
</script>

<!-- Items reserve a 1px border at every level, so switching levels or states
     never shifts the row. The three props are independent: a border can show
     only on hover, or only on the current item. -->
<template>
  <div :class="stack({ gap: 'lg' })">
    <!-- No border (the default). -->
    <Navigation :items="items" activeItem="Overview" />

    <!-- A resting outline on every item, brighter under the pointer. -->
    <Navigation
      :items="items"
      activeItem="Overview"
      border="muted"
      borderInteract="default"
    />

    <!-- Borderless at rest — the outline is the current item's affordance. -->
    <Navigation :items="items" activeItem="Overview" borderActive="accent" />

    <!-- Outline on every row EXCEPT the current one. -->
    <Navigation
      :items="items"
      activeItem="Overview"
      border="muted"
      borderActive="none"
    />

    <!-- Hover-only outline. -->
    <Navigation :items="items" activeItem="Overview" borderInteract="bold" />
  </div>
</template>

Tabs

appearance="tabs" turns the strip into minimal underline tabs: transparent items, a 2px accent bar marking the current one (bottom edge when horizontal, inline-start edge when vertical), and a 1px baseline track on the container. In this mode the per-item border props are ignored and feedback defaults to "primary" so the bar picks up the accent color — pass another feedback to retint it. It’s the same visual language as Radio’s appearance="tab" and Tab’s appearance="tabs".

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];
---

<!-- `appearance="tabs"` turns the strip into minimal underline tabs: transparent
     items, a 2px accent bar on the current one, and a 1px baseline track on the
     container. `feedback` defaults to primary here; pass another to retint. -->
<div class={stack({ gap: "xl", direction: "column" })}>
  <Navigation items={items} appearance="tabs" activeItem="Reports" />

  <div class={stack({ gap: "lg", direction: "row" })}>
    <Navigation
      items={items}
      appearance="tabs"
      direction="vertical"
      activeItem="Reports"
    />
    <Navigation
      items={items}
      appearance="tabs"
      direction="vertical"
      feedback="danger"
      activeItem="Settings"
    />
  </div>
</div>

import { Navigation } from "../Navigation";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];

// `appearance="tabs"` turns the strip into minimal underline tabs: transparent
// items, a 2px accent bar on the current one, and a 1px baseline track on the
// container. `feedback` defaults to primary here; pass another to retint.
export default function TabsDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <Navigation items={items} appearance="tabs" activeItem="Reports" />

      <div className={stack({ gap: "lg", direction: "row" })}>
        <Navigation
          items={items}
          appearance="tabs"
          direction="vertical"
          activeItem="Reports"
        />
        <Navigation
          items={items}
          appearance="tabs"
          direction="vertical"
          feedback="danger"
          activeItem="Settings"
        />
      </div>
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { label: "Overview", href: "#" },
    { label: "Reports", href: "#" },
    { label: "Settings", href: "#" },
  ];
</script>

<!-- `appearance="tabs"` turns the strip into minimal underline tabs: transparent
     items, a 2px accent bar on the current one, and a 1px baseline track on the
     container. `feedback` defaults to primary here; pass another to retint. -->
<div class={stack({ gap: "xl", direction: "column" })}>
  <Navigation {items} appearance="tabs" activeItem="Reports" />

  <div class={stack({ gap: "lg", direction: "row" })}>
    <Navigation
      {items}
      appearance="tabs"
      direction="vertical"
      activeItem="Reports"
    />
    <Navigation
      {items}
      appearance="tabs"
      direction="vertical"
      feedback="danger"
      activeItem="Settings"
    />
  </div>
</div>

<script setup lang="ts">
import { Navigation } from "@pindoba/vue-navigation";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Overview", href: "#" },
  { label: "Reports", href: "#" },
  { label: "Settings", href: "#" },
];
</script>

<!-- `appearance="tabs"` turns the strip into minimal underline tabs: transparent
     items, a 2px accent bar on the current one, and a 1px baseline track on the
     container. `feedback` defaults to primary here; pass another to retint. -->
<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <Navigation :items="items" appearance="tabs" activeItem="Reports" />

    <div :class="stack({ gap: 'lg', direction: 'row' })">
      <Navigation
        :items="items"
        appearance="tabs"
        direction="vertical"
        activeItem="Reports"
      />
      <Navigation
        :items="items"
        appearance="tabs"
        direction="vertical"
        feedback="danger"
        activeItem="Settings"
      />
    </div>
  </div>
</template>

Semantics

By default Navigation is an ARIA menu: menubar on the root, menu on sublists, menuitem on rows. That’s right for an application menu, but a docs sidebar or a table of contents is site navigation, not a menu — and the menu roles constrain what a row may contain.

semantics="list" drops them all and renders native navigation instead: <nav><ul><li><a>, with a submenu parent staying a disclosure button (aria-expanded), which is what it already is behaviourally. It’s an all-or-nothing switch because the roles are: a role="menu" list may only contain menuitem / group / separator children, so they can’t be suppressed on individual rows.

Switching to "list" is what makes linkableParent available.

The two models also differ on the keyboard. Under "menu" the widget follows the ARIA menubar pattern: the whole navigation is one Tab stop (a roving tabindex seeded from the active item), arrow keys move focus along the current level — with wrap, Home/End, and disabled items skipped — and the axis arrows open and close submenus (ArrowDown on a horizontal menubar, ArrowRight in a vertical sidebar; opening focuses the first child, Escape closes and refocuses the parent). Under "list" none of that applies: every link and disclosure is a normal Tab stop, which is exactly what site navigation should be.

Linkable submenu parents

A submenu parent normally renders as a toggle <button> — correct when the parent is a category rather than a destination. But a docs heading that owns sub-headings is a destination, and so is a settings section with its own landing page.

linkableParent splits that row into an <a> that navigates and a <button> that expands, side by side. The Panel surface moves from the anchor to a wrapper (itemRow) so the link and the chevron read as one row and hover covers both.

They are two tab stops, so each rings on its own: keyboard focus on the link lights the whole row (the anchor fills it), while focus on the disclosure rings just the chevron. Mouse clicks ring neither — both are keyed on :focus-visible.

It is ignored — with a dev warning — under the default semantics="menu" (a menuitem forbids interactive descendants), and silently when the item has no href (core won’t invent a destination) or no child items. In compact rails the row collapses back to a single control, since there’s no room for two hit targets.

The disclosure gets a derived accessible name (Toggle <label>), overridable per item via submenuToggleLabel or navigation-wide with a submenuToggleLabel function.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

{
  /* A table of contents: every heading is a real destination, including the
    ones that own sub-headings. `linkableParent` splits those rows into a link
    plus a disclosure, so the group can be collapsed without giving up the
    anchor. It needs `semantics="list"` — a split row can't live inside an ARIA
    menu, where `menuitem` forbids interactive descendants. */
}
<div class={stack({ gap: "lg", maxWidth: "320px", width: "100%" })}>
  <Navigation
    direction="vertical"
    semantics="list"
    size="sm"
    background="transparent"
    activeItem="Tokens"
    items={[
      { label: "Overview", href: "#overview", tooltip: false },
      {
        label: "Styling",
        href: "#styling",
        tooltip: false,
        linkableParent: true,
        defaultExpanded: true,
        items: [
          { label: "Tokens", href: "#tokens", tooltip: false },
          { label: "Recipes", href: "#recipes", tooltip: false },
        ],
      },
      {
        label: "API",
        href: "#api",
        tooltip: false,
        linkableParent: true,
        items: [{ label: "Props", href: "#props", tooltip: false }],
      },
    ]}
  />
</div>

import { Navigation } from "../Navigation";
import { stack } from "@pindoba/styled-system/patterns";

// A table of contents: every heading is a real destination, including the ones
// that own sub-headings. `linkableParent` splits those rows into a link plus a
// disclosure, so the group can be collapsed without giving up the anchor. It
// needs `semantics="list"` — a split row can't live inside an ARIA menu, where
// `menuitem` forbids interactive descendants.
const items = [
  { label: "Overview", href: "#overview", tooltip: false as const },
  {
    label: "Styling",
    href: "#styling",
    tooltip: false as const,
    linkableParent: true,
    defaultExpanded: true,
    items: [
      { label: "Tokens", href: "#tokens", tooltip: false as const },
      { label: "Recipes", href: "#recipes", tooltip: false as const },
    ],
  },
  {
    label: "API",
    href: "#api",
    tooltip: false as const,
    linkableParent: true,
    items: [{ label: "Props", href: "#props", tooltip: false as const }],
  },
];

export default function LinkableParentsDemo() {
  return (
    <div className={stack({ gap: "lg" })}>
      <Navigation
        items={items}
        direction="vertical"
        semantics="list"
        size="sm"
        background="transparent"
        activeItem="Tokens"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  // A table of contents: every heading is a real destination, including the
  // ones that own sub-headings. `linkableParent` splits those rows into a link
  // plus a disclosure, so the group can be collapsed without giving up the
  // anchor. It needs `semantics="list"` — a split row can't live inside an ARIA
  // menu, where `menuitem` forbids interactive descendants.
  const items = [
    { label: "Overview", href: "#overview", tooltip: false as const },
    {
      label: "Styling",
      href: "#styling",
      tooltip: false as const,
      linkableParent: true,
      defaultExpanded: true,
      items: [
        { label: "Tokens", href: "#tokens", tooltip: false as const },
        { label: "Recipes", href: "#recipes", tooltip: false as const },
      ],
    },
    {
      label: "API",
      href: "#api",
      tooltip: false as const,
      linkableParent: true,
      items: [{ label: "Props", href: "#props", tooltip: false as const }],
    },
  ];
</script>

<div class={stack({ gap: "lg" })}>
  <Navigation
    {items}
    direction="vertical"
    semantics="list"
    size="sm"
    background="transparent"
    activeItem="Tokens"
  />
</div>

<script setup lang="ts">
import { Navigation } from "@pindoba/vue-navigation";
import { stack } from "@pindoba/styled-system/patterns";

// A table of contents: every heading is a real destination, including the ones
// that own sub-headings. `linkableParent` splits those rows into a link plus a
// disclosure, so the group can be collapsed without giving up the anchor. It
// needs `semantics="list"` — a split row can't live inside an ARIA menu, where
// `menuitem` forbids interactive descendants.
const items = [
  { label: "Overview", href: "#overview", tooltip: false as const },
  {
    label: "Styling",
    href: "#styling",
    tooltip: false as const,
    linkableParent: true,
    defaultExpanded: true,
    items: [
      { label: "Tokens", href: "#tokens", tooltip: false as const },
      { label: "Recipes", href: "#recipes", tooltip: false as const },
    ],
  },
  {
    label: "API",
    href: "#api",
    tooltip: false as const,
    linkableParent: true,
    items: [{ label: "Props", href: "#props", tooltip: false as const }],
  },
];
</script>

<template>
  <div :class="stack({ gap: 'lg' })">
    <Navigation
      :items="items"
      direction="vertical"
      semantics="list"
      size="sm"
      background="transparent"
      activeItem="Tokens"
    />
  </div>
</template>

In a flyout (horizontal or compact) the popover attaches to the disclosure button, since that is the control that opens it. The trigger is a single binding, so with submenuTrigger="hover" the hover target is the chevron rather than the whole row.

DOM-driven active state

activeItem decides the current row at render time. A table of contents can’t work that way: which heading is current is decided at scroll time by a client scroll-spy that moves aria-current between links.

activeSource="current" hands the decision to the DOM. Nothing is baked — no data-panel-active, and no aria-current emitted from activeItem (a baked value would fight the spy) — and the row styles itself from whatever carries a truthy aria-current. On a split row the marked element is the anchor inside the Panel, so Navigation uses Panel’s current-within arm there automatically.

activeItem is still read in this mode for seeding which submenus start expanded, which is usually what you want.

One caveat: the active look follows aria-current, so if a client sets it on more than one element, more than one row lights up.

Suppressing the native title

An item with no tooltip falls back to a native title on hover. Where labels are always fully visible — a table of contents again — that’s a tooltip repeating text the reader can already see. tooltip: false on the item declines both the tooltip and the title, including the auto-derived one a compact rail would otherwise add.

Submenus: Inline

Give any item child items and it becomes a submenu. In an expanded vertical navigation children expand inline below the parent (the parent renders as a toggle button with aria-expanded). Parents of the active item start expanded; defaultExpanded seeds the rest.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import StampHouse from "./parts/stamp-house.astro";
import StampBox from "./parts/stamp-box.astro";
import StampSettings from "./parts/stamp-settings.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

{
  /* Expanded vertical navigation: items with `items` expand inline. Parents of
    the active item start expanded; `defaultExpanded` seeds the rest. */
}
<div
  class={stack({
    gap: "md",
    direction: "column",
    maxWidth: "320px",
    width: "100%",
  })}
>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: StampHouse },
      {
        label: "Products",
        leading: StampBox,
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Automation", href: "#automation" },
          {
            label: "Reports",
            items: [
              { label: "Weekly", href: "#weekly" },
              { label: "Monthly", href: "#monthly" },
            ],
          },
        ],
      },
      {
        label: "Settings",
        leading: StampSettings,
        defaultExpanded: true,
        items: [
          { label: "Profile", href: "#profile" },
          { label: "Billing", href: "#billing" },
        ],
      },
    ]}
    activeItem="analytics"
    direction="vertical"
    emphasis="tertiary"
  />
</div>

import { Navigation } from "../Navigation";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={24}
        height={24}
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {children}
      </svg>
    </Stamp>
  );
}

const home = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const products = (
  <GhostIcon>
    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
    <path d="m3.3 7 8.7 5 8.7-5" />
    <path d="M12 22V12" />
  </GhostIcon>
);
const settings = (
  <GhostIcon>
    <circle cx="12" cy="12" r="3" />
    <path d="M12 1v6m0 6v10M1 12h6m6 0h10" />
  </GhostIcon>
);

// Expanded vertical navigation: items with `items` expand inline. Parents of
// the active item start expanded; `defaultExpanded` seeds the rest.
export default function SubmenuInlineDemo() {
  return (
    <div
      className={stack({
        gap: "md",
        direction: "column",
        maxWidth: "320px",
        width: "100%",
      })}
    >
      <Navigation
        items={[
          { label: "Home", href: "#", leading: home },
          {
            label: "Products",
            leading: products,
            items: [
              { label: "Analytics", href: "#analytics" },
              { label: "Automation", href: "#automation" },
              {
                label: "Reports",
                items: [
                  { label: "Weekly", href: "#weekly" },
                  { label: "Monthly", href: "#monthly" },
                ],
              },
            ],
          },
          {
            label: "Settings",
            leading: settings,
            defaultExpanded: true,
            items: [
              { label: "Profile", href: "#profile" },
              { label: "Billing", href: "#billing" },
            ],
          },
        ]}
        activeItem="analytics"
        direction="vertical"
        emphasis="tertiary"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideBox from "@lucide/svelte/icons/box";
  import LucideSettings from "@lucide/svelte/icons/settings";
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet products()}
  <Stamp emphasis="ghost"><LucideBox /></Stamp>
{/snippet}
{#snippet settings()}
  <Stamp emphasis="ghost"><LucideSettings /></Stamp>
{/snippet}

<!-- Expanded vertical navigation: items with `items` expand inline. Parents of
     the active item start expanded; `defaultExpanded` seeds the rest. -->
<div
  class={stack({
    gap: "md",
    direction: "column",
    maxWidth: "320px",
    width: "100%",
  })}
>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      {
        label: "Products",
        leading: products,
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Automation", href: "#automation" },
          {
            label: "Reports",
            items: [
              { label: "Weekly", href: "#weekly" },
              { label: "Monthly", href: "#monthly" },
            ],
          },
        ],
      },
      {
        label: "Settings",
        leading: settings,
        defaultExpanded: true,
        items: [
          { label: "Profile", href: "#profile" },
          { label: "Billing", href: "#billing" },
        ],
      },
    ]}
    activeItem="analytics"
    direction="vertical"
    emphasis="tertiary"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Package, Settings } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

// Expanded vertical navigation: items with `items` expand inline. Parents of
// the active item start expanded; `defaultExpanded` seeds the rest.
const items = [
  { label: "Home", href: "#", leading: ghost(House) },
  {
    label: "Products",
    leading: ghost(Package),
    items: [
      { label: "Analytics", href: "#analytics" },
      { label: "Automation", href: "#automation" },
      {
        label: "Reports",
        items: [
          { label: "Weekly", href: "#weekly" },
          { label: "Monthly", href: "#monthly" },
        ],
      },
    ],
  },
  {
    label: "Settings",
    leading: ghost(Settings),
    defaultExpanded: true,
    items: [
      { label: "Profile", href: "#profile" },
      { label: "Billing", href: "#billing" },
    ],
  },
];
</script>

<template>
  <div
    :class="
      stack({
        gap: 'md',
        direction: 'column',
        maxWidth: '320px',
        width: '100%',
      })
    "
  >
    <Navigation
      :items="items"
      activeItem="analytics"
      direction="vertical"
      emphasis="tertiary"
    />
  </div>
</template>

In a horizontal navigation submenus open as dropdown flyouts below the item. The default trigger is click; set submenuTrigger="hover" for hover-open with intent delays.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

{
  /* Horizontal navigation: items with `items` open a dropdown flyout. The
    second nav opens on hover instead of click. */
}
<div class={stack({ gap: "xl", direction: "column" })}>
  <Navigation
    items={[
      { label: "Home", href: "#" },
      {
        label: "Products",
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Automation", href: "#automation" },
          { label: "Reports", href: "#reports" },
        ],
      },
      {
        label: "Resources",
        items: [
          { label: "Documentation", href: "#docs" },
          { label: "Community", href: "#community" },
          {
            label: "Guides",
            items: [
              { label: "Getting started", href: "#getting-started" },
              { label: "Theming", href: "#theming" },
            ],
          },
        ],
      },
      { label: "Pricing", href: "#pricing" },
    ]}
    activeItem="analytics"
  />
  <Navigation
    submenuTrigger="hover"
    items={[
      { label: "Home", href: "#" },
      {
        label: "Products",
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Automation", href: "#automation" },
        ],
      },
      { label: "Pricing", href: "#pricing" },
    ]}
    emphasis="tertiary"
  />
</div>

import { Navigation } from "../Navigation";
import { stack } from "@pindoba/styled-system/patterns";

// Horizontal navigation: items with `items` open a dropdown flyout. The
// second nav opens on hover instead of click.
export default function SubmenuFlyoutDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <Navigation
        items={[
          { label: "Home", href: "#" },
          {
            label: "Products",
            items: [
              { label: "Analytics", href: "#analytics" },
              { label: "Automation", href: "#automation" },
              { label: "Reports", href: "#reports" },
            ],
          },
          {
            label: "Resources",
            items: [
              { label: "Documentation", href: "#docs" },
              { label: "Community", href: "#community" },
              {
                label: "Guides",
                items: [
                  { label: "Getting started", href: "#getting-started" },
                  { label: "Theming", href: "#theming" },
                ],
              },
            ],
          },
          { label: "Pricing", href: "#pricing" },
        ]}
        activeItem="analytics"
      />
      <Navigation
        submenuTrigger="hover"
        items={[
          { label: "Home", href: "#" },
          {
            label: "Products",
            items: [
              { label: "Analytics", href: "#analytics" },
              { label: "Automation", href: "#automation" },
            ],
          },
          { label: "Pricing", href: "#pricing" },
        ]}
        emphasis="tertiary"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<!-- Horizontal navigation: items with `items` open a dropdown flyout. The
     second nav opens on hover instead of click. -->
<div class={stack({ gap: "xl", direction: "column" })}>
  <Navigation
    items={[
      { label: "Home", href: "#" },
      {
        label: "Products",
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Automation", href: "#automation" },
          { label: "Reports", href: "#reports" },
        ],
      },
      {
        label: "Resources",
        items: [
          { label: "Documentation", href: "#docs" },
          { label: "Community", href: "#community" },
          {
            label: "Guides",
            items: [
              { label: "Getting started", href: "#getting-started" },
              { label: "Theming", href: "#theming" },
            ],
          },
        ],
      },
      { label: "Pricing", href: "#pricing" },
    ]}
    activeItem="analytics"
  />
  <Navigation
    submenuTrigger="hover"
    items={[
      { label: "Home", href: "#" },
      {
        label: "Products",
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Automation", href: "#automation" },
        ],
      },
      { label: "Pricing", href: "#pricing" },
    ]}
    emphasis="tertiary"
  />
</div>

<script setup lang="ts">
import { Navigation } from "@pindoba/vue-navigation";
import { stack } from "@pindoba/styled-system/patterns";

// Horizontal navigation: items with `items` open a dropdown flyout. The
// second nav opens on hover instead of click.
const clickItems = [
  { label: "Home", href: "#" },
  {
    label: "Products",
    items: [
      { label: "Analytics", href: "#analytics" },
      { label: "Automation", href: "#automation" },
      { label: "Reports", href: "#reports" },
    ],
  },
  {
    label: "Resources",
    items: [
      { label: "Documentation", href: "#docs" },
      { label: "Community", href: "#community" },
      {
        label: "Guides",
        items: [
          { label: "Getting started", href: "#getting-started" },
          { label: "Theming", href: "#theming" },
        ],
      },
    ],
  },
  { label: "Pricing", href: "#pricing" },
];

const hoverItems = [
  { label: "Home", href: "#" },
  {
    label: "Products",
    items: [
      { label: "Analytics", href: "#analytics" },
      { label: "Automation", href: "#automation" },
    ],
  },
  { label: "Pricing", href: "#pricing" },
];
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <Navigation :items="clickItems" activeItem="analytics" />
    <Navigation
      :items="hoverItems"
      submenuTrigger="hover"
      emphasis="tertiary"
    />
  </div>
</template>

Submenus: Compact Rail

Submenus keep working when the navigation collapses — the children fly out to the side with their full labels, and the parent shows the active state when its (hidden) child is the current page. Trailing badges float over the corner at the same time.

AstroReactSvelteVue

PreviewCode

---
import Navigation from "../Navigation.astro";
import StampHouse from "./parts/stamp-house.astro";
import StampBox from "./parts/stamp-box.astro";
import StampSettings from "./parts/stamp-settings.astro";
import BadgeFive from "./parts/badge-five.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

{
  /* Collapsed rail: submenus fly out to the side with full labels; the parent
    of the active item shows the active state since its child is hidden.
    Trailing badges float over the corner via the Attachment. */
}
<div class={stack({ gap: "md", direction: "row" })}>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: StampHouse },
      {
        label: "Products",
        leading: StampBox,
        trailing: BadgeFive,
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Automation", href: "#automation" },
          { label: "Reports", href: "#reports" },
        ],
      },
      {
        label: "Settings",
        leading: StampSettings,
        items: [
          { label: "Profile", href: "#profile" },
          { label: "Billing", href: "#billing" },
        ],
      },
    ]}
    activeItem="analytics"
    direction="vertical"
    compact="icon"
  />
</div>

import { Navigation } from "../Navigation";
import Badge from "@pindoba/react-badge";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import type { ReactNode } from "react";

function GhostIcon({ children }: { children: ReactNode }) {
  return (
    <Stamp emphasis="ghost">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={24}
        height={24}
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {children}
      </svg>
    </Stamp>
  );
}

const home = (
  <GhostIcon>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </GhostIcon>
);
const products = (
  <GhostIcon>
    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
    <path d="m3.3 7 8.7 5 8.7-5" />
    <path d="M12 22V12" />
  </GhostIcon>
);
const settings = (
  <GhostIcon>
    <circle cx="12" cy="12" r="3" />
    <path d="M12 1v6m0 6v10M1 12h6m6 0h10" />
  </GhostIcon>
);

const five = (
  <Badge size="xs" emphasis="primary" feedback="danger">
    5
  </Badge>
);

// Collapsed rail: submenus fly out to the side with full labels; the parent
// of the active item shows the active state since its child is hidden.
// Trailing badges float over the corner via the Attachment.
export default function SubmenuCompactDemo() {
  return (
    <div className={stack({ gap: "md", direction: "row" })}>
      <Navigation
        items={[
          { label: "Home", href: "#", leading: home },
          {
            label: "Products",
            leading: products,
            trailing: five,
            items: [
              { label: "Analytics", href: "#analytics" },
              { label: "Automation", href: "#automation" },
              { label: "Reports", href: "#reports" },
            ],
          },
          {
            label: "Settings",
            leading: settings,
            items: [
              { label: "Profile", href: "#profile" },
              { label: "Billing", href: "#billing" },
            ],
          },
        ]}
        activeItem="analytics"
        direction="vertical"
        compact="icon"
      />
    </div>
  );
}

<script lang="ts">
  import Navigation from "../Navigation.svelte";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideBox from "@lucide/svelte/icons/box";
  import LucideSettings from "@lucide/svelte/icons/settings";
</script>

{#snippet home()}
  <Stamp emphasis="ghost"><LucideHouse /></Stamp>
{/snippet}
{#snippet products()}
  <Stamp emphasis="ghost"><LucideBox /></Stamp>
{/snippet}
{#snippet settings()}
  <Stamp emphasis="ghost"><LucideSettings /></Stamp>
{/snippet}
{#snippet five()}
  <Badge size="xs" emphasis="primary" feedback="danger">5</Badge>
{/snippet}

<!-- Collapsed rail: submenus fly out to the side with full labels; the parent
     of the active item shows the active state since its child is hidden.
     Trailing badges float over the corner via the Attachment. -->
<div class={stack({ gap: "md", direction: "row" })}>
  <Navigation
    items={[
      { label: "Home", href: "#", leading: home },
      {
        label: "Products",
        leading: products,
        trailing: five,
        items: [
          { label: "Analytics", href: "#analytics" },
          { label: "Automation", href: "#automation" },
          { label: "Reports", href: "#reports" },
        ],
      },
      {
        label: "Settings",
        leading: settings,
        items: [
          { label: "Profile", href: "#profile" },
          { label: "Billing", href: "#billing" },
        ],
      },
    ]}
    activeItem="analytics"
    direction="vertical"
    compact="icon"
  />
</div>

<script setup lang="ts">
import { h } from "vue";
import { Navigation } from "@pindoba/vue-navigation";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { House, Package, Settings } from "./_icons";

const ghost = (icon: Parameters<typeof h>[0]) =>
  h(Stamp, { emphasis: "ghost" }, () => h(icon));

const five = h(
  Badge,
  { size: "xs", emphasis: "primary", feedback: "danger" },
  () => "5",
);

// Collapsed rail: submenus fly out to the side with full labels; the parent
// of the active item shows the active state since its child is hidden.
// Trailing badges float over the corner via the Attachment.
const items = [
  { label: "Home", href: "#", leading: ghost(House) },
  {
    label: "Products",
    leading: ghost(Package),
    trailing: five,
    items: [
      { label: "Analytics", href: "#analytics" },
      { label: "Automation", href: "#automation" },
      { label: "Reports", href: "#reports" },
    ],
  },
  {
    label: "Settings",
    leading: ghost(Settings),
    items: [
      { label: "Profile", href: "#profile" },
      { label: "Billing", href: "#billing" },
    ],
  },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'row' })">
    <Navigation
      :items="items"
      activeItem="analytics"
      direction="vertical"
      compact="icon"
    />
  </div>
</template>

#Emphasis

#Active Emphasis

#Navigation Surface

#Leading Icons

#Trailing Stamps

#Leading and Trailing Combined

#Size with Trailing Badge

xs

sm

md

lg

#Compact: Icon + Label

#Compact: Icon Only

#Toggling Compact Mode

#Sections

#Per-Item Tooltips

#Compact: Trailing Badges

#Compact: Badge Placement

#Borders

#Tabs

#Semantics

#Linkable submenu parents

#DOM-driven active state

#Suppressing the native title

#Submenus: Inline

#Submenus: Flyout

#Submenus: Compact Rail

Emphasis

Active Emphasis

Navigation Surface

Leading Icons

Trailing Stamps

Leading and Trailing Combined

Size with Trailing Badge

Compact: Icon + Label

Compact: Icon Only

Toggling Compact Mode

Sections

Per-Item Tooltips

Compact: Trailing Badges

Compact: Badge Placement

Borders

Tabs

Semantics

Linkable submenu parents

DOM-driven active state

Suppressing the native title

Submenus: Inline

Submenus: Flyout

Submenus: Compact Rail