Navigation

Primary

The primary navigation style with prominent active state indicators and full-width styling.

Astro Svelte React TODO

Preview Code

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

<div
  class={stack({
    gap: "md",
    direction: "column",
    justify: "center",
    flexWrap: "wrap",
  })}
>
  <Navigation>
    <NavigationItem label="Home" href="#" isActive />
    <NavigationItem label="Products" href="#">
      <Badge slot="trailing" size="sm" emphasis="primary">New</Badge>
    </NavigationItem>
    <NavigationItem label="Special" href="#">
      <Badge slot="trailing" size="sm" emphasis="secondary" feedback="success">
        🔥 Hot
      </Badge>
    </NavigationItem>
    <NavigationItem label="Disabled" href="#" disabled />
    <NavigationItem label="logout" href="#" />
  </Navigation>

  <Navigation bordered>
    <NavigationItem label="Home" href="#" bordered isActive />
    <NavigationItem label="Products" href="#" bordered>
      <Badge slot="trailing" size="sm" emphasis="primary">New</Badge>
    </NavigationItem>
    <NavigationItem label="Special" href="#" bordered>
      <Badge slot="trailing" size="sm" emphasis="secondary" feedback="success">
        🔥 Hot
      </Badge>
    </NavigationItem>
    <NavigationItem label="Disabled" href="#" bordered disabled />
    <NavigationItem label="logout" href="#" bordered />
  </Navigation>

  <Navigation direction="vertical">
    <NavigationItem label="Home" href="#" direction="vertical" isActive />
    <NavigationItem label="Products" href="#" direction="vertical">
      <Badge slot="trailing" size="sm" emphasis="primary">New</Badge>
    </NavigationItem>
    <NavigationItem label="Special" href="#" direction="vertical">
      <Badge slot="trailing" size="sm" emphasis="secondary" feedback="success">
        🔥 Hot
      </Badge>
    </NavigationItem>
    <NavigationItem label="Disabled" href="#" direction="vertical" disabled />
    <NavigationItem label="logout" href="#" direction="vertical" />
  </Navigation>
</div>

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

{#snippet newBadge()}
  <Badge size="sm" emphasis="primary">New</Badge>
{/snippet}

{#snippet hotBadge()}
  <Badge size="sm" emphasis="secondary" feedback="success">🔥 Hot</Badge>
{/snippet}

<div
  class={stack({
    gap: "md",
    direction: "column",
    justify: "center",
    flexWrap: "wrap",
  })}
>
  <Navigation
    items={[
      { label: "Home", href: "#" },
      { label: "Products", href: "#", trailing: newBadge },
      { label: "Special", href: "#", trailing: hotBadge },
      { label: "Disabled", href: "#", disabled: true },
      { label: "logout", href: "#" },
    ]}
    activeItem="Home"
  />
  <Navigation
    items={[
      { label: "Home", href: "#" },
      { label: "Products", href: "#", trailing: newBadge },
      { label: "Special", href: "#", trailing: hotBadge },
      { label: "Disabled", href: "#", disabled: true },
      { label: "logout", href: "#" },
    ]}
    activeItem="Home"
    bordered
  />
  <Navigation
    items={[
      { label: "Home", href: "#" },
      { label: "Products", href: "#", trailing: newBadge },
      { label: "Special", href: "#", trailing: hotBadge },
      { label: "Disabled", href: "#", disabled: true },
      { label: "logout", href: "#" },
    ]}
    direction="vertical"
    activeItem="Home"
  />
</div>

Neutral

The neutral navigation style with subtle styling, perfect for secondary navigation or sidebar menus.

Astro Svelte React TODO

Preview Code

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

<div
  class={stack({
    gap: "md",
    direction: "column",
    justify: "center",
    flexWrap: "wrap",
  })}
>
  <Navigation emphasis="neutral">
    <NavigationItem label="Home" href="#" emphasis="neutral" isActive />
    <NavigationItem label="Products" href="#" emphasis="neutral">
      <Badge slot="trailing" size="sm" emphasis="primary">New</Badge>
    </NavigationItem>
    <NavigationItem label="Special" href="#" emphasis="neutral">
      <Badge slot="trailing" size="sm" emphasis="secondary" feedback="success">
        🔥 Hot
      </Badge>
    </NavigationItem>
    <NavigationItem label="Disabled" href="#" emphasis="neutral" disabled />
    <NavigationItem label="logout" href="#" emphasis="neutral" />
  </Navigation>

  <Navigation emphasis="neutral" bordered>
    <NavigationItem
      label="Home"
      href="#"
      emphasis="neutral"
      bordered
      isActive
    />
    <NavigationItem label="Products" href="#" emphasis="neutral" bordered>
      <Badge slot="trailing" size="sm" emphasis="primary">New</Badge>
    </NavigationItem>
    <NavigationItem label="Special" href="#" emphasis="neutral" bordered>
      <Badge slot="trailing" size="sm" emphasis="secondary" feedback="success">
        🔥 Hot
      </Badge>
    </NavigationItem>
    <NavigationItem
      label="Disabled"
      href="#"
      emphasis="neutral"
      bordered
      disabled
    />
    <NavigationItem label="logout" href="#" emphasis="neutral" bordered />
  </Navigation>

  <Navigation emphasis="neutral" direction="vertical">
    <NavigationItem
      label="Home"
      href="#"
      emphasis="neutral"
      direction="vertical"
    />
    <NavigationItem
      label="Products"
      href="#"
      emphasis="neutral"
      direction="vertical"
    >
      <Badge slot="trailing" size="sm" emphasis="primary">New</Badge>
    </NavigationItem>
    <NavigationItem
      label="Special"
      href="#"
      emphasis="neutral"
      direction="vertical"
      isActive
    >
      <Badge slot="trailing" size="sm" emphasis="secondary" feedback="success">
        🔥 Hot
      </Badge>
    </NavigationItem>
    <NavigationItem
      label="Disabled"
      href="#"
      emphasis="neutral"
      direction="vertical"
      disabled
    />
    <NavigationItem
      label="logout"
      href="#"
      emphasis="neutral"
      direction="vertical"
    />
  </Navigation>
</div>

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

{#snippet newBadge()}
  <Badge size="sm" emphasis="primary">New</Badge>
{/snippet}

{#snippet hotBadge()}
  <Badge size="sm" emphasis="secondary" feedback="success">🔥 Hot</Badge>
{/snippet}

<div
  class={stack({
    gap: "md",
    direction: "column",
    justify: "center",
    flexWrap: "wrap",
  })}
>
  <Navigation
    items={[
      { label: "Home", href: "#" },
      { label: "Products", href: "#", trailing: newBadge },
      { label: "Special", href: "#", trailing: hotBadge },
      { label: "Disabled", href: "#", disabled: true },
      { label: "logout", href: "#" },
    ]}
    emphasis="neutral"
    activeItem="Home"
  />
  <Navigation
    items={[
      { label: "Home", href: "#" },
      { label: "Products", href: "#", trailing: newBadge },
      { label: "Special", href: "#", trailing: hotBadge },
      { label: "Disabled", href: "#", disabled: true },
      { label: "logout", href: "#" },
    ]}
    emphasis="neutral"
    activeItem="Home"
    bordered
  />
  <Navigation
    items={[
      { label: "Home", href: "#" },
      { label: "Products", href: "#", trailing: newBadge },
      { label: "Special", href: "#", trailing: hotBadge },
      { label: "Disabled", href: "#", disabled: true },
      { label: "logout", href: "#" },
    ]}
    direction="vertical"
    emphasis="neutral"
    activeItem="Special"
  />
</div>

Leading Icons

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

Astro Svelte React TODO

Preview Code

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", icon: "lucide:house" },
  { label: "Inbox", icon: "lucide:inbox" },
  { label: "Drafts", icon: "lucide:file-text" },
  { label: "Sent", icon: "lucide:send" },
  { label: "Logout", icon: "lucide:log-out" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical">
    {
      items.map((item) => (
        <NavigationItem
          label={item.label}
          href="#"
          direction="vertical"
          isActive={item.label === "Inbox"}
        >
          <Stamp slot="leading" emphasis="ghost">
            <Icon name={item.icon} />
          </Stamp>
        </NavigationItem>
      ))
    }
  </Navigation>
</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>

Trailing Stamps

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

Astro Svelte React TODO

Preview Code

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { Icon } from "astro-icon/components";
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">
        <Icon name="lucide:star" />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Verified" href="#">
      <Stamp
        slot="trailing"
        size="xs"
        emphasis="secondary"
        feedback="success"
        shape="circle"
      >
        <Icon name="lucide:check" />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Promoted" href="#">
      <Stamp
        slot="trailing"
        size="xs"
        emphasis="secondary"
        feedback="warning"
        shape="circle"
      >
        <Icon name="lucide:zap" />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Subscribed" href="#">
      <Stamp slot="trailing" size="xs" emphasis="secondary" feedback="primary">
        <Icon name="lucide:bell" />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Protected" href="#">
      <Stamp slot="trailing" size="xs" emphasis="secondary" feedback="neutral">
        <Icon name="lucide:shield" />
      </Stamp>
    </NavigationItem>
  </Navigation>
</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>

Leading and Trailing Combined

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

Astro Svelte React TODO

Preview Code

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Icon } from "astro-icon/components";
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">
        <Icon name="lucide:house" />
      </Stamp>
      <Stamp slot="trailing" emphasis="ghost">
        <Icon name="lucide:chevron-right" />
      </Stamp>
    </NavigationItem>
    <NavigationItem label="Inbox" href="#" direction="vertical" isActive>
      <Stamp slot="leading" emphasis="ghost">
        <Icon name="lucide:inbox" />
      </Stamp>
      <Badge slot="trailing" emphasis="primary">12</Badge>
    </NavigationItem>
    <NavigationItem label="Notifications" href="#" direction="vertical">
      <Stamp slot="leading" emphasis="ghost">
        <Icon name="lucide:bell" />
      </Stamp>
      <Badge slot="trailing" emphasis="secondary" feedback="success">
        New
      </Badge>
    </NavigationItem>
    <NavigationItem label="Settings" href="#" direction="vertical">
      <Stamp slot="leading" emphasis="ghost">
        <Icon name="lucide:settings" />
      </Stamp>
      <Stamp slot="trailing" emphasis="primary" shape="circle">
        <Icon name="lucide:star" />
      </Stamp>
    </NavigationItem>
  </Navigation>
</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>

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.

Astro Svelte React TODO

Preview Code

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 { Icon } from "astro-icon/components";
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">
              <Icon name="lucide: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">
              <Icon name="lucide:check" />
            </Stamp>
          </NavigationItem>
        </Navigation>
      </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>

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.

Astro Svelte React TODO

Preview Code

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", icon: "lucide:house" },
  { label: "Inbox", icon: "lucide:inbox" },
  { label: "Drafts", icon: "lucide:file-text" },
  { label: "Sent", icon: "lucide:send" },
  { label: "Logout", icon: "lucide:log-out" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical" compact="stack">
    {
      items.map((item) => (
        <NavigationItem
          label={item.label}
          href="#"
          direction="vertical"
          compact="stack"
          isActive={item.label === "Inbox"}
        >
          <Stamp slot="leading" emphasis="ghost">
            <Icon name={item.icon} />
          </Stamp>
        </NavigationItem>
      ))
    }
  </Navigation>
</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>

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.

Astro Svelte React TODO

Preview Code

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", icon: "lucide:house" },
  { label: "Inbox", icon: "lucide:inbox" },
  { label: "Drafts", icon: "lucide:file-text" },
  { label: "Sent", icon: "lucide:send" },
  { label: "Logout", icon: "lucide:log-out" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical" compact="icon">
    {
      items.map((item) => (
        <NavigationItem
          label={item.label}
          href="#"
          direction="vertical"
          compact="icon"
          isActive={item.label === "Inbox"}
        >
          <Stamp slot="leading" emphasis="ghost">
            <Icon name={item.icon} />
          </Stamp>
        </NavigationItem>
      ))
    }
  </Navigation>
</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>

Toggling Compact Mode

Consumers drive the compact prop from layout state. Cycle between none, stack, and icon to see how the same items adapt.

<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";

  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 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: "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>

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.

Astro Svelte React TODO

Preview Code

---
import Navigation from "../Navigation.astro";
import NavigationItem from "../NavigationItem.astro";
import Stamp from "@pindoba/astro-stamp";
import { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", icon: "lucide:house", tooltip: "Go home" },
  {
    label: "Inbox",
    icon: "lucide:inbox",
    tooltip: { content: "12 unread", placement: "right" as const },
  },
  { label: "Drafts", icon: "lucide:file-text", tooltip: "Drafts (3)" },
  { label: "Sent", icon: "lucide:send" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Navigation direction="vertical">
    {
      items.map((item) => (
        <NavigationItem
          label={item.label}
          href="#"
          direction="vertical"
          tooltip={item.tooltip}
          isActive={item.label === "Inbox"}
        >
          <Stamp slot="leading" emphasis="ghost">
            <Icon name={item.icon} />
          </Stamp>
        </NavigationItem>
      ))
    }
  </Navigation>
</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>

Props

props · 8 total

prop	type	default	description
items	NavigationItem[]	-	Array of navigation items to display
emphasis	string	undefined	Visual emphasis level for the navigation
direction	string	undefined	Layout direction for the navigation
activeItem	string	undefined	ID or label of the currently active navigation item
bordered	boolean	false	Whether to show borders around the navigation
compact	"none""stack""icon"	"none"	Collapse the items to a narrow rail. `stack` shows icon over label with ellipsis; `icon` hides the label visually (kept for screen readers) and auto-wires the styled Tooltip from `item.label`.
passThrough	{ root?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; itemsContainer?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; item?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; itemActive?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; itemDisabled?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> } }	undefined	Custom styling and props for navigation elements
...rest	HTMLAttributes<HTMLElement>	-	Standard HTML nav element attributes

NavigationItem Interface

props · 8 total

prop	type	default	description
label	string	-	Display text for the navigation item
id	string	undefined	Unique identifier for the navigation item
href	string	undefined	URL for the navigation link
onClick	() => void	undefined	Click handler function for the navigation item
leading	SnippetReactNode	undefined	Element rendered before the label (icon, badge, stamp, etc.). Svelte: Snippet. React: ReactNode. Astro: use <NavigationItem slot="leading">.
trailing	SnippetReactNode	undefined	Element rendered after the label. Badges placed here auto-size to the navigation size variant.
disabled	boolean	false	Whether the navigation item is disabled
tooltip	string{ content: string; placement?: Placement }	undefined	Per-item styled tooltip. String or `{ content, placement }`. When `compact` is active, the tooltip is auto-derived from `label` unless overridden here.

Navigation

Components

Blocks

Components

Blocks

Navigation

Primary

Neutral

Leading Icons

Trailing Stamps

Leading and Trailing Combined

Size with Trailing Badge

xs

sm

md

lg

xs

sm

md

lg

Compact: Icon + Label

Compact: Icon Only

Toggling Compact Mode

Per-Item Tooltips

Props

NavigationItem Interface

Components

Blocks

#Primary

#Neutral

#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

#Per-Item Tooltips

#Props

#NavigationItem Interface

Primary

Neutral

Leading Icons

Trailing Stamps

Leading and Trailing Combined

Size with Trailing Badge

Compact: Icon + Label

Compact: Icon Only

Toggling Compact Mode

Per-Item Tooltips

Props

NavigationItem Interface